`background-image`

Время чтения: меньше 5 мин

Кратко

Свойство background-image задаёт элементу фоновую картинку.

Пример

        
          
          div {  background-image: url("фоновое-изображение.jpg");}
          div {
  background-image: url("фоновое-изображение.jpg");
}

Как пишется

        
          
          div {  background-image: url("адрес-картинки");}
          div {
  background-image: url("адрес-картинки");
}

Значения:

url — адрес картинки, он пишется в кавычках внутри скобок: url("cat_box.png").
none — сбрасывает фоновую картинку (значение по умолчанию).

Границы картинки и её расположение относительно краёв элемента мы задаём с помощью background-clip и background-origin.

Картинка плюс цвет

Элементу желательно задать одновременно и цвет фона background-color, и фоновую картинку. Если картинка не загрузится, то вместо неё пользователь увидит фоновый цвет.

        
          
          body {  background-image: url("background.png");  background-color: #09ff00;}
          body {
  background-image: url("background.png");
  background-color: #09ff00;
}

Открыть демо в новой вкладке

Несколько фоновых картинок

Фоновых картинок можно задать сколько угодно. Они будут накладываться друг на друга, причём сверху будет та, которая указана в списке первой. Если у картинки прозрачный фон, то под ней будет видна следующая. И так до бесконечности.

        
          
          body {  background-image: url("confetti.png"),  url("landscape.jpg");  background-color: gray;}
          body {
  background-image: url("confetti.png"),  url("landscape.jpg");
  background-color: gray;
}

Открыть демо в новой вкладке

Если у первой картинки фон не прозрачный, то следующая по счёту картинка будет видна только в случае, если первая не загрузилась.

Градиент на фоне

С помощью background-image также можно сделать градиентный фон. Например, так:

        
          
          div {  background-image: linear-gradient(red, yellow, green);}
          div {
  background-image: linear-gradient(red, yellow, green);
}

Подробнее о градиентах можно прочитать в статьях о linear-gradient, radial-gradient и conic-gradient().

Подсказки

💡 Разные браузеры могут отображать фоновую картинку по-разному. Например, если вы задаёте фоновую картинку внутри таблицы для одной строки целиком, то Chrome и Safari продублируют эту картинку в каждой ячейке, тогда как остальные растянут картинку на всю строку.

На практике

Егор Левченко

🛠 Стоит понимать разницу между <div> с фоновой картинкой и, собственно, картинкой <img>. Картинке можно задать только один параметр размера: высоту или ширину, и браузер сам рассчитает второй. У блока с фоном, внутри которого нет контента, надо указывать оба параметра.

Так происходит потому, что по умолчанию <div> имеет ширину 100% и нулевую высоту, если у него нет содержимого. Поэтому фоновая картинка будет не видна.

Чтобы это исправить, нужно добавить элементу необходимые ширину и высоту. А ещё не забыть про background-repeat и background-size, чтобы фон выглядел отлично.

Алёна Батицкая

🛠 Если задаём фоновую картинку для блока со светлым текстом, то обязательно задаём и фоновый цвет.

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

Пример ниже не пустой, но в нём не загрузилась фоновая картинка:

        
          
          <div class="element">  <h1 class="main-title">Фронтенд-блог: чиним вёрстку одной строкой</h1></div>
          <div class="element">
  <h1 class="main-title">Фронтенд-блог: чиним вёрстку одной строкой</h1>
</div>

        
          
          .element {  display: flex;  justify-content: center;  align-items: center;  background-image: url("broken-link-to-image.png");}.main-title {  width: 80%;  margin: 0 auto;  color: white;  text-align: center;  text-transform: uppercase;  font-family: sans-serif;  font-size: 3rem;}
          .element {
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url("broken-link-to-image.png");
}

.main-title {
  width: 80%;
  margin: 0 auto;
  color: white;
  text-align: center;
  text-transform: uppercase;
  font-family: sans-serif;
  font-size: 3rem;
}

Демка будет наглядной, если на сайте включить светлую тему ☀️

Открыть демо в новой вкладке

Чиним одной строкой:

        
          
          .element {  display: flex;  justify-content: center;  align-items: center;  background-image: url("broken-link-to-image.png");  background-color: gray;}
          .element {
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url("broken-link-to-image.png");
  background-color: gray;
}

Открыть демо в новой вкладке

Да, будет не так красиво, как нарисовал дизайнер, но вся информация будет доступна.

🛠 Кроме линейного градиента можно задавать радиальный — круглый — градиент. Для этого нужно написать следующее:

        
          
          <div class="parent">  <div class="spread-gradient"></div>  <div class="smooth-circle"></div>  <div class="sharp-circle"></div></div>
          <div class="parent">
  <div class="spread-gradient"></div>
  <div class="smooth-circle"></div>
  <div class="sharp-circle"></div>
</div>

        
          
          .parent {  display: flex;  justify-content: space-around;  padding: 5%;  background-color: #1a5ad7;}.spread-gradient,.smooth-circle,.sharp-circle {  width: 200px;  height: 200px;}.spread-gradient {  background-image: radial-gradient(#e6e6e6, #1a5ad7);}.smooth-circle {  background-image: radial-gradient(#e6e6e6, #1a5ad7 70%);}.sharp-circle {  background-image: radial-gradient(#e6e6e6 70%, #1a5ad7 70%);}
          .parent {
  display: flex;
  justify-content: space-around;
  padding: 5%;
  background-color: #1a5ad7;
}

.spread-gradient,
.smooth-circle,
.sharp-circle {
  width: 200px;
  height: 200px;
}

.spread-gradient {
  background-image: radial-gradient(#e6e6e6, #1a5ad7);
}

.smooth-circle {
  background-image: radial-gradient(#e6e6e6, #1a5ad7 70%);
}

.sharp-circle {
  background-image: radial-gradient(#e6e6e6 70%, #1a5ad7 70%);
}

Открыть демо в новой вкладке