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	Значение элемента наследуется от родительского элемента.


15.0+	4.0+ 3.6 -moz-	7.0+	11.5+ 10.1 -o-

15.0+

4.0+
3.6 -moz-

7.0+

11.5+
10.1 -o-

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

Синтаксис

Пример

Пример

Пример

Пример

Значения

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

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