background

Универсальное свойство background позволяет установить одновременно несколько параметров фона, к примеру, цвет, фоновую картинку, её положение и размер. Для подробного ознакомления смотрите информацию о каждом свойстве отдельно. Допустимо, также, указывать параметры сразу нескольких фонов, перечисляя их через запятую.

Краткая информация

Значение по умолчанию	transparent \|\| none \|\| repeat \|\| scroll \|\| 0% 0%
Наследуется	Нет
Применяется	Ко всем элементам
Анимируется	Да

Синтаксис

background: [<фон>, ]* <последний_фон>

Здесь:

<фон> = background-image || background-position [ / background-size ]? || background-repeat || background-attachment || background-origin || background-clip

<последний_фон> = background-image || background-position [ / background-size ]? || background-repeat || background-attachment || background-origin || background-clip || background-color

Если наряду с фоновыми изображениями требуется задать цвет фона элемента, он указывается в последнюю очередь после перечисления.

	Описание	Пример
<тип>	Указывает тип значения.	<размер>
A && B	Значения должны выводиться в указанном порядке.	<размер> && <цвет>
A \| B	Указывает, что надо выбрать только одно значение из предложенных (A или B).	normal \| small-caps
A \|\| B	Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.	width \|\| count
[ ]	Группирует значения.	[ crop \|\| cross ]
*	Повторять ноль или больше раз.	[,<время>]*
+	Повторять один или больше раз.	<число>+
?	Указанный тип, слово или группа не является обязательным.	inset?
{A, B}	Повторять не менее A, но не более B раз.	<радиус>{1,4}
#	Повторять один или больше раз через запятую.	<время>#

Значения

Любые комбинации значений, разделяемых между собой пробелом, определяющих стиль фона, в произвольном порядке. Ни одно значение не является обязательным, поэтому неиспользуемые можно опустить.

Пример

<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <title>background</title> <style> .block { background: url(/example/image/greek-pattern.svg) 0 0 / 30px repeat-y #f6cd97; padding: 1rem 1rem 1rem 3em; } </style> </head> <body> <div class="block"> Первый подвиг Геракла — это история о его схватке с немейским львом. Чудовищный лев, порождение Тифона и Ехидны, терроризировал окрестности Немеи, убивая на своём пути людей и животных. Геракл отправился на поиски льва и, обнаружив его логово, попытался убить зверя из лука, но стрелы отскакивали от толстой шкуры льва. Тогда Геракл загнал его в пещеру и задушил голыми руками. После этого он содрал со льва шкуру и использовал её как плащ, а голову льва надевал на голову как шлем. Этот подвиг стал первым из двенадцати, которые Геракл совершил по приказу царя Эврисфея. </div> </body> </html>

<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <title>background</title> <style> .block { background: url(/example/image/greek-pattern.svg) 0 0 / 30px repeat-y, url(/example/image/greek-pattern.svg) 100% 0 / 30px repeat-y, #f6cd97; padding: 1rem 3rem; } </style> </head> <body> <div class="block"> Второй подвиг Геракла был связан с Лернейской гидрой, чудовищной многоголовой змеей, обитавшей в болотах около города Лерны. Геракл отправился к Лерне, чтобы уничтожить гидру, но столкнулся с серьёзными трудностями. Каждый раз, когда он отрубал одну из голов гидры, на её месте вырастали две новые. Кроме того, ядовитые испарения от гидры делали воздух вокруг неё смертельно опасным. </div> </body> </html>

Объектная модель

Объект.style.background

Спецификация

Браузеры


9	12	1	10.5	1.3	3.6


2.1	1	10	3.2

В таблице браузеров применяются следующие обозначения.

— элемент полностью поддерживается браузером;
— элемент браузером не воспринимается и игнорируется;
— при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.

Число указывает версию браузреа, начиная с которой элемент поддерживается.