Самоучитель CSS Справочник CSS Единицы измерения Селекторы Цвета CSS
Свойства CSS
animation animation-delay animation-direction animation-duration animation-fill-mode animation-iteration-count animation-name animation-play-state animation-timing-function backface-visibility background background-attachment background-clip background-color background-image background-origin background-position background-repeat background-size border border-bottom border-bottom-color border-bottom-left-radius border-bottom-right-radius border-bottom-style border-bottom-width border-collapse border-color border-image border-left border-left-color border-left-style border-left-width border-radius border-right border-right-color border-right-style border-right-width border-spacing border-style border-top border-top-color border-top-left-radius border-top-right-radius border-top-style border-top-width border-width bottom box-shadow box-sizing caption-side clear clip color column-count column-gap column-rule column-rule-color column-rule-style column-rule-width columns column-span column-width content counter-increment counter-reset cursor direction display empty-cells float font @font-face font-family font-size font-size-adjust font-stretch font-style font-variant font-weight height @keyframes left letter-spacing line-height list-style list-style-image list-style-position list-style-type margin margin-bottom margin-left margin-right margin-top max-height max-width min-height min-width opacity outline outline-color outline-offset outline-style outline-width overflow overflow-x overflow-y padding padding-bottom padding-left padding-right padding-top page-break-after page-break-before page-break-inside perspective perspective-origin position quotes resize right table-layout text-align text-decoration text-indent text-overflow text-shadow text-transform top transform transform-origin transform-style transition transition-delay transition-duration transition-property transition-timing-function unicode-bidi vertical-align visibility white-space width word-break word-spacing word-wrap z-index

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
    
Копирование материалов с данного сайта возможно только с разрешения администрации сайта
и при указании прямой активной ссылки на источник.
2011-2016 © puzzleweb.ru

Реклама на сайте | Обратная связь