background

Пример

Установите различные свойства фона в одном объявлении:

body {
background: lightblue url("img_tree.gif") no-repeat fixed center;
}

Определение background

CSS свойство background - это сокращенное свойство для:

Не имеет значения, отсутствует ли одно из приведенных выше значений, например. background:#ff0000 url(smiley.gif); допускается.

Показ демо ❯

Значение по умолчанию:	смотрите отдельные свойства
Унаследовано:	no
Анимируемый:	yes, смотрите отдельные свойства. Читайте о animatable Попробуй
Версия:	CSS1 + new properties in CSS3
JavaScript синтаксис:	object.style.background="red url(smiley.gif) top left no-repeat" Попробуй

Поддержка background

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

Свойство
background	1.0	4.0	1.0	1.0	3.5

Примечание: Смотрите раздел "Поддержка отдельных браузеров" для каждого значения ниже.

Синтаксис background

background: bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit;

Примечание: Если одним из свойств в сокращенном объявлении является свойство bg-size, вы должны использовать / (косую черту), чтобы отделить его от свойства bg-position, например. background:url(smiley.gif ) 10px 20px/50px 50px; в результате получится фоновое изображение, расположенное на 10 пикселей слева, на 20 пикселей сверху, а размер изображения составит 50 пикселей в ширину и 50 пикселей в высоту.

Примечание: Если используется несколько источников фоновых изображений, но также требуется цвет фона, параметр background-color должен быть последним в списке.

Значения background

Значение	Описание	CSS	Демонстрация
background-color	Определяет цвет фона, который будет использоваться	1	Демо ❯
background-image	Определяет ОДНО или НЕСКОЛЬКО фоновых изображений, которые будут использоваться	1	Демо ❯
background-position	Определяет положение фоновых изображений	1	Демо ❯
background-size	Определяет размер фоновых изображений	3	Демо ❯
background-repeat	Определяет, как повторять фоновые изображения	1	Демо ❯
background-origin	Определяет область позиционирования фоновых изображений	3	Демо ❯
background-clip	Определяет область рисования фоновых изображений	3	Демо ❯
background-attachment	Определяет, являются ли фоновые изображения фиксированными или прокручиваются вместе с остальной частью страницы	1
initial	Устанавливает для этого свойства значение по умолчанию. Читайте о initial	3
inherit	Наследует это свойство от своего родительского элемента. Читайте о inherit	2