Свойство CSS background-image

Свойство CSS background-image задаёт одно или несколько фоновых изображений для элемента. Изображение может быть реальным файлом, указанным через url(), или изображением, сгенерированным средствами CSS, например градиентом.

По умолчанию фоновое изображение помещается в левый верхний угол элемента и повторяется (мозаично) по горизонтали и вертикали, заполняя доступное пространство. Управлять этим поведением можно с помощью связанных свойств background-repeat, background-position, background-size и background-attachment — или всем сразу через сокращённое свойство background.

Область отрисовки охватывает содержимое элемента, его padding и border, но не margin. Изменить используемый блок можно с помощью background-clip, а точку отсчёта позиционирования — с помощью background-origin.

Когда использовать

Используйте background-image вместо встроенного тега <img>, когда изображение носит декоративный, а не информационный характер: фоны, текстуры, hero-секции, градиенты и иконки, не являющиеся частью смысла страницы. Поскольку фоновые изображения не читаются экранными дикторами, никогда не помещайте сюда изображения, несущие важную информацию; для этого используйте <img> с атрибутом alt.

Несколько вещей, которые стоит знать заранее:

Всегда указывайте background-color в качестве запасного варианта. Если изображение не загрузится (или ещё загружается), вместо него отобразится цвет, сохраняя читаемость текста.
Несколько изображений накладываются друг на друга. При перечислении изображений через запятую первое рисуется поверх, а каждое следующее — позади него.
Градиенты тоже являются изображениями. linear-gradient() и radial-gradient() создают CSS-изображения, поэтому они относятся к background-image, а не к background-color.

Начальное значение	none
Применяется к	Всем элементам. Также применяется к ::first-letter и ::first-line.
Наследуется	Нет.
Анимируется	Нет.
Версия	CSS1 + некоторые новые значения в CSS3
DOM Синтаксис	object.style.backgroundImage = "url(img_tree.png)";

Синтаксис

Синтаксис свойства CSS background-image

background-image: url | none | linear-gradient | radial-gradient | repeating-linear-gradient | repeating-radial-gradient | initial | inherit;

Пример свойства background-image:

Пример свойства CSS background-image

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      body {
        background-image: url("/uploads/media/default/0001/02/55a2f152f59bf42a99b576d44a4578ec9daa0ab6.png");
        background-color: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>Background-image property example</h2>
    <p>Hello World!</p>
  </body>
</html>

Попробуйте сами »

Результат

В следующем примере одновременно используются два изображения. Они накладываются с помощью background-position и background-repeat, а background-attachment: fixed фиксирует их на месте при прокрутке страницы.

Пример свойства background-image с другими свойствами фона:

Пример свойства CSS background-image с двумя изображениями

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      body {
        padding: 100px;
        background-image: url("/uploads/media/default/0001/02/55a2f152f59bf42a99b576d44a4578ec9daa0ab6.png"), url("/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg");
        background-attachment: fixed;
        background-position: 5px 50px;
        background-repeat: no-repeat, repeat;
      }
    </style>
  </head>
  <body>
    <h2>Background-image property example</h2>
    <p>The background image is positioned 5px from the left, and 50px down from the top.</p>
  </body>
</html>

Попробуйте сами »

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

В следующем примере linear-gradient() с двумя цветовыми точками используется как фоновое изображение для элемента <div>. Поскольку градиент является изображением, url() здесь не нужен:

Пример свойства background-image со значением "linear-gradient":

Пример свойства CSS background-image со значением linear-gradient

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        height: 300px;
        background-image: linear-gradient(#eee, #1c87c9);
      }
    </style>
  </head>
  <body>
    <h2>Linear gradient as a background image example</h2>
    <p>This linear gradient starts at the top. It starts gray, transitioning to blue:</p>
    <div></div>
  </body>
</html>

Попробуйте сами »

Пример свойства background-image со значением "repeating-radial-gradient":

Пример свойства CSS background-image со значением repeating-radial-gradient

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      div {
        height: 300px;
        background-color: #cccccc;
        background-image: repeating-radial-gradient(#8ebf42, #eee 15%, #ccc 30%);
      }
    </style>
  </head>
  <body>
    <h2>Radial gradient as a background image example</h2>
    <div></div>
  </body>
</html>

Попробуйте сами »

Частые ошибки

Изображение не видно, потому что у элемента нет высоты. Фону нужен блок для отрисовки. Пустой <div> сжимается до нулевой высоты — задайте явное значение height (как в примерах с градиентами) или добавьте содержимое.
Ошибка 404 для фона происходит незаметно. В отличие от <img>, сломанный url() не вызывает ошибки и не показывает значок — область просто остаётся пустой (или отображает background-color). Тщательно проверяйте путь, если ничего не появляется.
Используйте background-color, а не background-image, для однотонного цвета. Градиенты идут в background-image; однотонные цвета — в background-color.
Мозаика выглядит неправильно? Добавьте background-repeat: no-repeat и задайте размер изображения через background-size (например, cover, чтобы заполнить блок).

Значения

Значение	Описание
url	Задаёт URL изображения. Можно указать несколько изображений, разделив их запятыми.
none	Фоновое изображение отсутствует. Это значение по умолчанию.
linear-gradient	В качестве фонового изображения задаётся линейный градиент.
radial-gradient	В качестве фонового изображения задаётся радиальный градиент.
repeating-linear-gradient	Повторяет линейный градиент.
repeating-radial-gradient	Повторяет радиальный градиент.
initial	Устанавливает свойство в значение по умолчанию.
inherit	Наследует свойство от родительского элемента.

Практика

Какие CSS-свойства можно использовать для управления фоновым изображением элемента?

background-imagebackground-colorbackground-sizebackground-positiontext-color