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

одно или несколько фоновых изображений

Задает одно или несколько фоновых изображений. Если картинок несколько — они будут накладываться друг на друга.

По умолчанию фоновая картинка располагается в левом верхнем углу и повторяется по горизонтали и вертикали.

Рекомендуется всегда задавать 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 Устанавливает значение по умолчанию.

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

НастольныеМобильные
Chrome
Edge
Firefox
IE
Opera
Safari
Chrome
Firefox
Opera
Safari
Samsung
Android
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
Поддерживается: Да Нет Частично
Получай полезные материалы удобным способом!
Добавить комментарий