background

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


12.0+	4.0+	1.0+	1.0+	3.5+	1.0+

Примечание: браузер Internet Explorer 8 и более ранние версии не поддерживает несколько фоновых изображений для одного элемента.

Описание

CSS свойство background обеспечивает краткий метод установки значений сразу нескольких свойств для работы с фоном в одном объявлении.

Допускается указывать значения следующих свойств: background-clip, background-color, background-image, background-origin, background-position, background-repeat, background-size и background-attachment.

Значения свойства разделяются пробелом и могут следовать в любом порядке, браузер сам определит, какое из них соответствует нужному свойству. Все значения указывать не обязательно, любое из них можно опустить, в этом случае вместо пропущенного значения будет использовано значение, которое установлено для свойства по умолчанию, например, если не указано как должно повторяться фоновое изображение, то будет использовано значение по умолчанию свойства background-repeat.

Если в свойстве задаётся размер изображения (background-size), то он должен указываться после указания начальной позиции изображения, через символ / (слэш):

background: background-position/background-size;

Размер изображения указывается только в паре с указанием начальной позиции. Но указание начальной позиции не обязательно указывать в паре с размером изображения.

Совет: когда вы одновременно задаете элементу задний фон и рамку, помните: если стиль рамки - точечная или пунктирная линия, то фоновый цвет или фоновое изображение будет проступать в промежутках между точками или штрихами линий рамки. Другими словами, по умолчанию браузеры размещают линию рамки поверх фона.

Значение по умолчанию:	смотрите отдельно каждое свойство, входящее в состав краткого метода
Применяется:	ко всем элементам, а также к псевдо-элементам ::first-letter и ::first-line
Анимируется:	да, смотрите каждое свойство, входящее в состав краткого метода, отдельно
Наследуется:	нет
Версия:	CSS1, CSS3
Синтаксис JavaScript:	object.style.background="red url(smiley.gif) top left no-repeat"

Синтаксис

background: color position/size repeat clip origin attachment image;

Значения свойства

Значение	Описание	CSS
background-color	Указывает цвет, который будет использоваться в качестве фона.	1
background-position	Задает позицию для фонового изображения.	1
background-size	Указывает размер фонового изображения. Значения этого свойства можно указывать только после значения свойства background-position, разделяя их с помощью прямого слэша "/", например, 5px 5px/100px 100px.	3
background-repeat	Указывает, как повторять фоновое изображение.	1
background-attachment	Указывает будет ли фоновое изображение фиксированным или будет прокручиваться вместе с содержимым страницы.	1
background-image	Определяет фоновое изображение.	1
background-clip	Определяет область в элементе, для которой задаётся фон.	3
background-origin	Определяет область в элементе, для которой задаётся фоновое изображение.	3

Пример

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Пример</title>
  <style type="text/css">
    body {
      background: url("img_flwr.gif"),
                  url("img_tree.gif");
    }
  </style>
</head>

<body>
</body>

</html>

Результат данного примера в окне браузера: