Задает одно или несколько фоновых изображений. Если картинок несколько — они будут накладываться друг на друга.
По умолчанию фоновая картинка располагается в левом верхнем углу и повторяется по горизонтали и вертикали.
Рекомендуется всегда задавать background-color
на случай, если фоновое изображение не загрузится или будет грузиться долго.
Примеры
body {
background-image: url('cat.jpg'), url('dog.jpg');
background-image: linear-gradient(blue, red);
}
Значения
Значение | Описание |
---|---|
none | По умолчанию. Изображение не задано. |
url() | Абсолютный или относительный адрес изображения. Если несколько — разделенные запятой. |
linear-gradient() | Линейный градиент. |
radial-gradient() | Радиальный градиент. |
repeating-linear-gradient() | Повторяющийся линейный градиент. |
repeating-radial-gradient() | Повторяющийся радиальный градиент. |
inherit | Наследует значение родительского блока. |
initial | Устанавливает значение по умолчанию. |
Поддержка браузерами
НастольныеМобильные
background-image
1
12
1
4
3.5
1
18
4
14
1
1.0
≤37
element()
нет
нет
4 -moz-
нет
нет
нет
нет
4 -moz-
нет
нет
нет
нет
Градиенты
1
12
3.6
10
11
4
18
4
14
3.2
1.0
≤37
image-rect()
нет
нет
4 -moz-
нет
нет
нет
нет
4 -moz-
нет
нет
нет
нет
image-set()
21 -webkit-
79 -webkit-
нет
нет
15 -webkit-
6 -webkit-
25 -webkit-
нет
14 -webkit-
6 -webkit-
1.5 -webkit-
4.4 -webkit-
Несколько фонов
1
12
3.6
9
10.5
1.3
18
4
14
1
1.0
≤37
SVG изображения
8
12
4
9
9.5
5
18
4
14
5
1.0
≤37
Поддерживается: Да Нет Частично