Как добавить изображение фоном. Свойство background-image

20 мая 2023

background-image позволяет добавить изображение в качестве фона для выбранного элемента. Фоновое изображение может быть любого типа и повторяться или масштабироваться в зависимости от настроек.

Синтаксис

selector {
  background-image: url("image.jpg");
}

Значения

url('путь_к_изображению') — указывает путь к изображению. Вы можете указать относительный путь к изображению на вашем сервере или абсолютный URL для изображения в интернете.
none — значение по умолчанию, где нет фона. Если не хотите использовать изображение в качестве фона, вы можете установить background-image: none;.
linear-gradient(), radial-gradient(), repeating-linear-gradient(), repeating-radial-gradient() — создают градиент фона без использования изображений. Можно определить цветовую палитру и ориентацию градиента.

Повторное изображение

background-repeat: repeat; — значение по умолчанию, изображение повторяется по горизонтали и вертикали. Изображение будет заполнять фон элемента, повторяясь при необходимости.

background-repeat: repeat-x; — повторяется только по горизонтали.

background-repeat: repeat-y; — повторяется только по вертикали.

background-repeat: no-repeat; — отображается только один раз без повторения.

Размер изображения

background-size: auto; — отображается в своём естественном размере.

Как отличить контентное изображение от декоративного

background-size: cover; — масштабируется так, чтобы полностью заполнить фон элемента, возможно, обрезая его.

background-size: contain; — масштабируется так, чтобы полностью поместиться в фон элемента без искажений. Белые полосы могут появиться по краям фона, если пропорции изображения и фона не совпадают.

Наследование

Свойство background-image не наследуется дочерними элементами. Каждый элемент должен самостоятельно задавать фоновое изображение.

Примеры использования

Добавление изображения на фон определённого элемента

: recommend

Когда в вёрстке нужна высота

:::

<div class="container">
  <h1>Здесь паучок</h1>
</div>

.container {
  width: 600px;
  height: 300px;
  background-image: url('01.jpg');
  background-size: cover; /* размер одного повторяющегося изображения */
}

h1 {
  color: white;
  text-align: left;
  padding: 100px;
}

: recommend

Как изменить ширину элемента

:::

Добавление повторяющегося изображения на фон элемента

<div class="container">
  <h1>Здесь паучок</h1>
</div>

.container {
  width: 600px;
  height: 300px;
  background-image: url('01.jpg');
  background-repeat: repeat;
}

h1 {
  color: white;
  text-align: left;
  padding: 100px;
}

Добавление градиента на фон

  <div class="container">
    <h1>Здесь нет паучка</h1>
  </div>

.container {
 width: 600px;
 height: 300px;
 background-image: linear-gradient(to right, #E2BCBB, #E4514A);
}

h1 {
  color: black;
  text-align: left;
  padding: 100px;
}

Нюансы использования

Фоновые картинки не будут автоматически масштабироваться под размеры родительского элемента. Если размеры картинки и родительского элемента не совпадают, то картинка обрежется или начнёт повторяться.
Если задать цвет фона и background-image для одного элемента, то картинка будет отображаться поверх цвета фона.

⭐ Поддержка браузерами свойства background-image