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

    CSS

    background-image

    Полезное свойство, если нужно поставить на фон картинку или задать декоративное изображение. Можно даже градиент!

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

    1. Кратко
    2. Пример
    3. Как пишется
      1. Картинка плюс цвет
      2. Несколько фоновых картинок
      3. Градиент на фоне
    4. Подсказки
    5. На практике
      1. Егор Левченко советует
      2. Алёна Батицкая советует

    Кратко

    Свойство 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%);
}
    Открыть демо в новой вкладке

    Читайте также