Задает фон у блока. Это короткая запись свойств:
background-color
background-image
background-position
background-size
background-repeat
background-origin
background-clip
background-attachment
Если какое-то свойство не указано — будет применено значение по умолчанию. Например, можно задать только цвет или только картинку.
Если нужно указать свойство background-size
, оно должно идти через слеш /
после background-position
.
Можно указать несколько фонов через запятую. Если задано несколько фонов и нужен фоновый цвет, он задается последним.
Примеры
background: #f1e4f9;
background: #f00 url('image.png') top center no-repeat;
background: center linear-gradient(blue, red);
background: url('image.png') center / cover, url('image2.png') repeat-x;
Значения
Значение | Описание |
---|---|
background-color | Цвет фона. Подробнее о цветах в CSS. Если задана фоновая картинка — рекомендуется задавать и фоновый цвет. Если задано несколько фоновых изображений, цвет должен идти на последнем фоне. |
background-image | Одно или несколько фоновых изображений. |
background-position | Расположение фоновых изображений. |
background-size | Размер фоновых изображений. |
background-repeat | Повтор у фоновых изображений. |
background-origin | Область расположения фонового изображения. |
background-clip | Распространение фона под границами элемента. |
background-attachment | Фиксирование фона при прокрутке. |
inherit | Наследует значение родительского блока. |
initial | Устанавливает значение по умолчанию. |
Поддержка браузерами
НастольныеМобильные
background
1
12
1
4
3.5
1
18
4
10.1
1
1.0
2
SVG изображения
1
12
4
9
9.5
3.1
18
4
10.1
1
1.0
≤37
background-clip
21
12
22
9
15
5.1
25
22
14
4
1.5
3
background-origin
21
12
22
9
15
5.1
25
22
14
4
1.5
3
background-size
21
12
9
9
21
5.1
25
18
14
4
1.5
3
Несколько фонов
1
12
3.6
9
10.5
1.3
18
4
14
1
1.0
2
Поддерживается: Да