Свойства CSS

Меню

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>

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

пример свойства background