Справочник HTML & CSS

background-image

Одна или несколько фоновых картинок: файлы или градиенты.

Синтаксис

background-image: url(…);

Значения

Параметр	Тип	Описание
url()	function	Картинка из файла.
linear-gradient()	function	Градиент.
none	keyword	Без картинки.

Примеры

Фотография в качестве фона:

<style>
  .box {
    height: 120px;
    background-image: url(/media/photo-400x250.jpg);
    background-size: cover;
  }
</style>
 
<div class="box"></div>

Два слоя через запятую — первый рисуется сверху:

<style>
  .banner {
    padding: 24px;
    color: white;
    background-image:
      linear-gradient(rgb(0 0 0 / 0.5), rgb(0 0 0 / 0.5)),
      url(/media/photo-600x200.jpg);
    background-size: cover;
  }
</style>
 
<div class="banner">Readable text over a darkened photo</div>

Примечания

Фоновая картинка — украшение: экранные чтецы её не видят, и alt у неё нет. Если картинка несёт смысл, используйте <img>. Всегда задавайте и background-color, чтобы текст читался, пока картинка загружается.

См. также

background-size — Размер фоновой картинки.
background-position — Где внутри блока находится фоновая картинка.
background-repeat — Повторяется ли фоновая картинка, чтобы заполнить блок.
url() — Ссылка на файл: картинку, шрифт, таблицу стилей.

Вопросы и ответы по теме

В учебнике

Фон и рамки — Фоновые картинки, их повтор, размер и положение, виды рамок, скругление углов и outline.

Спасибо, что читаете!