Фон div картинка: Фон в CSS (background-color, background-image)

Если картинка отвалится или окажется неправильного размера — сломаются блоки. Как быть?

<!-- index. html -->
<div>
  <img src="demo.png" />
</div>

/* style.css */
.box {
  position: relative;
  padding-bottom: 75%;
  /* Размеры изображения 400x300.
  300 / 400 = 0.75 → 75% */
}

img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

Padding-bottom считается относительно ширины родителя, поэтому с помощью него можно задать пропорцию контейнера

<!-- index.html -->
<div>
  <div>
    <div>
      <img src="demo.
  png" />
    </div>
    <div>
      Остроумная подпись к изображению
    </div>
  </div>
  <div>
    Пласт, так или иначе, неравномерен.
    Показательный пример – детройтское техно
    начинает соноропериод. Ощущение
    мономерности ритмического движения
    возникает, как правило, в условиях
    темповой стабильности, тем не менее
    процессуальное изменение ненаблюдаемо.
  </div>
</div>

/* style.css */
.row {
  display: flex;
}

.boxWrapper {
  width: 30%;
  margin-right: 1em;
}

.text {
  flex: 1
}

.box {
  border: 1px solid #000;
}

Без обёртки padding-bottom посчитатется от всей ширины родителя и пропорции сломаются

Пласт, так или иначе, неравномерен. Показательный пример – детройтское техно начинает соноропериод.

Пласт, так или иначе, неравномерен. Показательный пример – детройтское техно начинает соноропериод. Ощущение мономерности ритмического движения возникает, как правило, в условиях темповой стабильности, тем не менее процессуальное изменение ненаблюдаемо.

Картинка загрузилась, всё в порядке

Пласт, так или иначе, неравномерен. Показательный пример – детройтское техно начинает соноропериод. Ощущение мономерности ритмического движения возникает, как правило, в условиях темповой стабильности, тем не менее процессуальное изменение ненаблюдаемо.

Картинка не загрузилась, всё на своих местах

<!-- index.html -->
<div>
  Пласт, так или иначе, неравномерен.
  Показательный пример – детройтское техно
  начинает соноропериод. Ощущение
  мономерности ритмического движения
  возникает, как правило, в условиях
  темповой стабильности, тем не менее
  процессуальное изменение ненаблюдаемо.
</div>

<div>
  Пласт, так или иначе, неравномерен. 
  Показательный пример – детройтское техно
  начинает соноропериод. Ощущение
  мономерности ритмического движения
  возникает, как правило, в условиях
  темповой стабильности, тем не менее
  процессуальное изменение ненаблюдаемо.
</div>

/* style.css */
.container {
  background: url(demo.png) no-repeat center;
  height: 300px;
  border: 1px solid #000;
}

.container.with__cover {
  background-size: cover;
  /* Изображение растянется под обрез
  с сохранением пропорций */
}

.container.with__contain {
  background-size: contain;
  /* Изображение впишется в контейнер */
}

Пласт, так или иначе, неравномерен. Показательный пример – детройтское техно начинает соноропериод. Ощущение мономерности ритмического движения возникает, как правило, в условиях темповой стабильности, тем не менее процессуальное изменение ненаблюдаемо.

Изображение растянуто по обрез

Пласт, так или иначе, неравномерен. Показательный пример – детройтское техно начинает соноропериод. Ощущение мономерности ритмического движения возникает, как правило, в условиях темповой стабильности, тем не менее процессуальное изменение ненаблюдаемо.

Изображение вписано в прямоугольник с текстом

Задний фон закрывает заголовок

• Главная
• Вопросы

При стилизации одной из секции в Sass возникла проблема: задний фон закрывает заголовок и подзаголовок сайта. Не понимаю в чём ошибка, так как проверял код в депазитории. ( file:///C:/Users/REFRESH/OneDrive/%D0%A0%D0%B0%D0%B1%D0%BE%D1%87%D0%B8%D0%B9%20%D1%81%D1%82%D0%BE%D0%BB/uber/src/index. html или http://127.0.0.1:5500/src/ )

(Так как не было в вариантах выбора для прикрепления кода Sass, проставил CSS.)

.choise
    position: relative
    min-height: 895px
    padding: 57px 0 138px 0
    background: url('../img/bg/mobile_app.png') center (center / cover) no-repeat
    &_img
        position: relative
        display: block
        margin: 56px auto 0 auto
        z-index: 2
    &_descr
        text-align: center
        color: #222222
        font-size: 17px
        font-weight: 300
        line-height: 24px
    .black
        position: absolute
        top: 0
        left: 0
        height: 499px
        width: 100%
        background-color: #070716
        z-index: 1

    <section>
        <div>
            <div></div>
            <div>возможности</div>
            <h3>Выбор - отличная штука!</h3>
            <div>Закажите автомобиль, который подходит вам 
             по стилю и бюджету</div>
    
            <img src="img/choise/car.  png" alt="uber car">
            <div>
                Машины на каждый день.<br>
                Лучше, быстрее и дешевле, чем такси
            </div>
        </div>
    </section>

Тимофей Павлов

1 year ago

• Активные
• Старые
• Голоса

блоки для которых определено позиционирование position: absolute/relative/fixed

идут поверх блоков без позиционирования, поэтому блок .black перекрывает заголовки

для него нужно проставить index: -1 — отрицательное значение ставит блок позади контента родительского блока, т.е. весь контент внутри блока <div> будет поверх черного фона, что нам и нужно

Valera TT

1 year ago

При отрицательном z-index пропадает задний фон (черный цвет). И цвет заголовков должен быть белый. Этот код скопирован из депазитория, поэтому ошибка не моя.

Тимофей Павлов

1 year ago

вижу что название класса choise вместо choice, значит этот код не является кодом из депозитория, возможно где-то в других фрагментах кода такие же расхождения, если не показываются заголовки — надо смотреть стили для label, title, subtitle — там цвет задается для заголовков и z-index для них должен быть 2, чтобы они были поверх фона black

Valera TT

1 year ago

так в депозитории нет стилей для label, title, subtitle, я знаю что там задаётся цвет для заголовков, мне поэтому и не понятно как они станут белыми если это не прописано

Тимофей Павлов

1 year ago

а нет, нашел, там были прописаны а у меня нет, всё заработало, спасибо

Тимофей Павлов

1 year ago

Установить фоновое изображение элемента Div с помощью функции в JavaScript

5 месяцев назад

от Умар Хассан

В процессе создания привлекательных и адаптивных веб-сайтов требуется добавлять изображения в объектную модель документа (DOM) при запуске функций.

В этой статье объясняются подходы к установке фонового изображения элемента div с помощью функции в JavaScript.

Как установить фоновое изображение элемента Div с помощью функции в JavaScript?

Фоновое изображение элемента div с помощью функции в JavaScript можно установить с помощью следующих подходов:

• Свойство « style.backgroundImage ».
• « setAttribute() » метод.

Подход 1. Установка фонового изображения элемента Div с помощью функции в JavaScript с использованием свойства style.backgroundImage

Свойство « backgroundImage » возвращает фоновое изображение элемента. Это свойство можно использовать для получения элемента « div » с помощью определяемой пользователем функции и применения к нему фонового изображения.

Синтаксис

object.style.backgroundImage = «url(‘URL’)|back|initial|inherit»

В данном синтаксисе:

• « url » относится к расположению файла изображения.
• « назад » указывает на фоновое изображение.
• « начальный » относится к значению свойства по умолчанию.
• « наследовать » указывает на наследование свойства от его родительского элемента.

Пример
Давайте следовать приведенному ниже примеру:

В приведенном выше фрагменте кода выполните следующие действия:

• Включите элемент « div » с указанным « id » и скорректированными размерами.
• После этого включить заявленный заголовок.
• Также создайте кнопку с прикрепленным событием « onclick », перенаправляющим на функцию divBackground().

Давайте перейдем к части кода JavaScript:

В приведенном выше фрагменте кода:

• Объявите функцию с именем « divBackground() ».
• В своем определении получить доступ к включенному элементу « div » по его « id », используя метод « document.getElementById() ».
• Наконец, примените свойство « style.backgroundImage » с указанным местоположением изображения как « URL ».
• Это приведет к установке фонового изображения на включенный заголовок и кнопку в « div ».

Вывод

В приведенном выше выводе видно, что фоновое изображение применяется к содержащемуся « заголовок » и « кнопка » в « div ».

Подход 2: установка фонового изображения элемента Div с помощью функции в JavaScript с использованием метода setAttribute()

Метод « setAttribute() » устанавливает новое значение атрибута. Этот метод можно применить для установки атрибута « background image » для таблицы, содержащейся в элементе « div ».

Синтаксис

element.setAttribute(имя, значение)

В приведенном выше синтаксисе:

• « имя » относится к имени атрибута.
• « значение » указывает на значение атрибута.

Пример
Давайте посмотрим на следующие строки кода:

В приведенном выше фрагменте кода:

• Включите элемент « div » с указанным « id ».
• Также содержит указанную « таблица » в « div » с указанными значениями « table-header » и « table-data ».
• На следующем шаге создайте кнопку с прикрепленным событием « onclick », вызывающим функцию backgroundImage().

Перейдем к JavaScript-части кода:

В приведенном выше фрагменте кода выполните следующие шаги:

• Объявите функцию с именем « backgroundImage() ».
• В своем определении получить доступ к элементу « div » по его « id », используя « document.getElementById()» 9Метод 0017».
• После этого примените метод « setAttribute() » с указанным путем к изображению, как обсуждалось, и атрибутом « style » в качестве параметра.

Вывод

Из приведенного выше вывода видно, что фоновое изображение добавляется в таблицу при нажатии кнопки.

Заключение

Свойство « style.backgroundImage » или метод « setAttribute() » можно использовать для установки фонового изображения элемента div с помощью функции в JavaScript. Первый подход может быть реализован для извлечения « div » с помощью пользовательской функции и применить к нему фоновое изображение. Последний метод можно использовать для установки фонового изображения включенной таблицы путем установки ее атрибутов (изображения). В этом руководстве объясняется, как установить фоновое изображение для div с помощью функции, использующей JavaScript.

Об авторе

Умар Хассан

Я веб-разработчик. Будучи техническим автором, я стараюсь изучать новые вещи и адаптироваться к ним каждый день. Мне нравится писать о развивающихся программных инструментах и ​​технологиях и делать их понятными для конечного пользователя.

Посмотреть все сообщения

Основы наложения контента

Натан Рохлер

Предположим, на вашей странице есть область контента. Эта область может содержать текст, изображения, таблицы или любой другой тип HTML-контента. Если вы хотите добавить простое фоновое изображение за этим содержимым, это легко — вы просто добавляете CSS background-image в контейнер

. Но что, если вы хотите использовать более сложный контент в качестве фона? Например, предположим, что вы хотите разместить тонкий слайдер только с изображениями, созданный с помощью EasyRotator, за разделом содержимого страницы:

Этот тип конфигурации требует немного больше кода, но все еще относительно прост, как только вы узнаете, что нужно. Лучше всего, когда мы реализуем этот эффект, вы начнете узнавать о мощном свойстве CSS position и множестве возможностей его использования.

Идея

Во-первых, давайте вкратце рассмотрим, как мы будем размещать содержимое и контейнеры:

Каждый из этих трех контейнеров представляет собой

. Первая (№1) — это внешняя оболочка

, которая действует как своего рода «сцена» или «холст». Мы будем применять относительное позиционирование CSS (через position: relative; ), чтобы разрешить управление размещением его подконтейнеров; подробнее об этом чуть позже.

Внутри основного контейнера у нас есть два подконтейнера, которые расположены друг над другом. Первый (элемент № 2 на диаграмме) содержит фоновое содержимое. Второй (элемент № 3 на диаграмме) содержит основное содержимое, с которого мы начинаем. Держатель фона

позиционируется абсолютно, что выводит его за пределы потока компоновки. В сочетании с относительным позиционированием основного контейнера это абсолютное позиционирование позволяет области фона перекрывать область содержимого. Применяя относительное позиционирование к содержимому и значения z-index как к фону, так и к оберткам содержимого, мы заставляем содержимое отображаться сверху.

Я понимаю, что все это может немного сбивать с толку, поэтому давайте углубимся в код, который на самом деле довольно прост.

Код

Как я упоминал ранее, вы можете начать с любого типа содержимого HTML. Это не имеет значения, так что мы притворимся, что у нас есть текст и очень простая таблица:

 
Lorem ipsum dolor sit amet ad infinitum. Наслаждайтесь нашими новейшими данными:
<таблица>
  
    Некоторые данные
    Еще немного данных
  
  
    Некоторые данные
    Еще немного данных
  

 

Чтобы создать фоновую область, которая плавает за этим содержимым, мы добавляем следующие дополнительные теги

со специальным CSS, применяемым через атрибуты стиля :

 
<дел>
  
  
  <дел>
    
  

<дел> . .. весь оригинальный контент здесь ...

Давайте рассмотрим каждую часть теперь, когда вы можете видеть фактический код.

Прежде всего, это основной контейнер/обертка div с позицией : относительная . Это позволяет нам использовать position: absolute для его первого дочернего элемента, который является фоновым контейнером. При использовании осталось: 0; сверху: 0; Я указал, что фон должен быть выровнен точно по верхнему левому углу содержимого; но это можно легко изменить. Например, предположим, что вы хотите, чтобы фон располагался на 200 пикселей вправо и на 100 пикселей вниз от верхнего левого угла содержимого. В этом случае вы бы вместо этого использовали

слева: 200 пикселей; верх: 100 пикселей;

Теперь вы можете размещать HTML-контент любого мыслимого типа в фоновой оболочке — тонкая типографика, изображения, ротаторы и даже видео (не рекомендуется!).

Далее у нас есть оболочка содержимого. Имеет позиций: относительная; , что позволяет нам вручную управлять порядком наложения с помощью свойства z-index . Внутри обертки мы размещаем оригинальный контент, с которого начали.

Обратите внимание, как мы контролируем перекрытие двух внутренних контейнеров. У первого z-индекс 1 , второй z-индекс 2 . Это гарантирует, что фон всегда будет отображаться за содержимым, поскольку он имеет более низкий z-индекс .

Совет: Если вы не знакомы со свойством z-index и с тем, как оно работает, прочтите другую статью, которую мы недавно опубликовали: Свойство Z-index: как управлять стеком на ваших веб-страницах.

Живая демонстрация

Вот готовый эффект с использованием ротатора в качестве фонового содержимого за обычным текстом:

Rotator работает на EasyRotator, бесплатном и простом конструкторе слайдеров jQuery от DWUser. com. Пожалуйста, включите JavaScript для просмотра.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec varius aliquet magna et elementum. Donec lacinia cursus placerat. Maecenas pulvinar odio id nibh lobortis bibendum. Приостановить потенциал. Cras a lorem lorem, eu scelerisque lorem. Cras in risus vel metus auctor viverra accumsan quis metus. Nunc porta scelerisque accumsan. Mauris non porttitor justo. Ut vitae pellentesque arcu. Nunc commodo aliquam elementum. Vivamus pulvinar является сем тристическим автором. Donec id Diam Sed neque faucibus pharetra et vitae orci.

Aliquam в Massa сидеть с лео ornare faucibus. Aliquam rutrum ipsum posuere arcu posuere non porttitor nibh luctus. Sed suscipit, nibh et elementum bibendum, elit nisi sodales tortor, vel lacinia mi arcu non augue. Nunc in eros id orci consectetur imperdiet eu vel massa. Donec fringilla magna non dui mattis euismod. In nec diam augue, vel tristique mi. Duis viverra nibh et eros aliquet nec dapibus felis gravida. Etiam accumsan, ipsum quis ornare tincidunt, tellus sapien dapibus est, id dictum dolor lectus interdum nibh. Sed leo augue, lobortis ac tincidunt sit amet, tincidunt interdum purus.

Integer velit nisl, tincidunt vel mattis sed, vulputate quis ligula. Suspendisse interdum ante est sollicitudin malesuada. In blandit tortor vel mi sollicitudin и dignissim diam lobortis. Aenean eget est felis, at venenatis neque. Aenean vitae mollis диам. Cras quam magna, pretium eget volutpat ac, tempor ut dolor. Sed sollicitudin porta dictum. Pellentesque обитатель morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent non sapien non neque rhoncus posuere vestibulum eu felis. Aenean ac sapien nec orci facilisis suscipit ac sit amet ligula.

Ваш друг,
Эйнштейн

Перевернуть все с ног на голову

Мы рассматривали эту технику с точки зрения добавления содержимого за основного содержания. Но его можно использовать и в обратном порядке — размещать содержимое 90 265 поверх существующего содержимого 90 266.