Клавиша / esc
Луноход стоит на камнях, на заднем плане ширма с изображением лунной поверхности
Иллюстрация: Кира Кустова

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>  <h1>Фронтенд-блог: чиним вёрстку одной строкой</h1></div>
          <div>
  <h1>Фронтенд-блог: чиним вёрстку одной строкой</h1>
</div>

        
        
          
        
      
        
          
          div {  background-image: url("broken-link-to-image.png");}h1 {  color: white;}
          div {
  background-image: url("broken-link-to-image.png");
}

h1 {
  color: white;
}

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

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

        
          
          .element {  background-image: url("broken-link-to-image.png");  background-color: #18191C;}
          .element {
  background-image: url("broken-link-to-image.png");
  background-color: #18191C;
}

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

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

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

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

        
        
          
        
      
        
          
          .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%);}
          .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%);
}

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