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

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

По умолчанию, background-image размещается в левом верхнем углу элемента, и повторяется по вертикали и по горизонтали.

Фон элемента совпадает с общим размером элемента, включая padding и border, но не margin.

Если установленное изображение недоступно, необходимо установить background-color.

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

Синтаксис

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

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      body  {
      background-image: url("/uploads/media/default/0001/02/55a2f152f59bf42a99b576d44a4578ec9daa0ab6.png");
      background-color: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>Пример свойства background-image</h2>
    <p>Hello World!</p>
  </body>
</html>

Пример, где использованы две изображения, установленные с помощью свойства background-position:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</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</h2>
    <p>Фоновое изображение установлено на расстоянии 5px слева и 50px вниз от верхней границы.</p>
  </body>
</html>

Пример, где значение"linear-gradient" с двумя цветами установлено как фоновое изображение для <div> элемента:

Пример

<!DOCTYPE html>
<html>
  <head>
    <style> 
      div {
      height: 300px;
      background-image: linear-gradient(#eee, #1c87c9 );
      }
    </style>
  </head>
  <body>
    <h2>Пример linear gradient, использованное как фоновое изображение</h2>
    <p> Linear gradient начинается сверху. Имеет серый цвет, который превращается в синий:</p>
    <div></div>
  </body>
</html>

Пример со значением "repeating-radial-gradient" с тремя цветами:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style> 
      div {
      height: 300px;
      background-color: #cccccc;
      background-image: repeating-radial-gradient(#8ebf42, #eee 15%, #ccc 30%);
      }
    </style>
  </head>
  <body>
    <h2>Пример radial gradient, использованное как фоновое изображение</h2>
    <div></div>
  </body>
</html>

Значения

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

Поддержка браузера

chrome firefox safari opera
15.0+ 4.0+
3.6 -moz-
7.0+ 11.5+
10.1 -o-

Практикуйте свои знания

Какие значения могут быть присвоены CSS-свойству background-image?
Считаете ли это полезным?