CSS-свойство background является кратким свойством для установки отдельных свойств фона, таких как background-image, background-position, background-size, background-repeat, background-attachment, background-origin, background-clip и background-color.

Значение по умолчанию: Индивидуальные CSS-свойства
Применяется к: Все элементы
Наследование: Нет
Анимирование: Да, так как некоторые свойства являются анимируемыми. Анимируемые свойства
Версия: CSS 1, 2, 3

Синтаксис

Синтаксически свойства задаются по следующему шаблону:

background: [ image position/size repeat attachment origin clip color ] | initial | inherit

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

Примеры написания кода свойства background:

body {
    background: #ffff00 url("smiley.png") no-repeat fixed center;
}

В CSS3 вы также можете добавить несколько фонов к одному элементу. Фоны наслаиваются друг на друга вдоль оси Z.

.box {
    width: 100%;
    height: 500px;
    background: url("images/birds.png") no-repeat center,  url("images/clouds.png") no-repeat center, lightblue;
}

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

В следующей таблице описаны значения этого свойства.

Значение Описание
background-attachment Указывает, прокручивается ли фон с документом или остается зафиксированным в области просмотра.
background-color Устанавливает цвет фона элемента.
background-clip Определяет область, в которой фон окрашен.
background-image Устанавливает одно или несколько фоновых изображений для элемента.
background-origin Определяет область позиционирования фоновых изображений.
background-position Устанавливает начальную позицию фонового изображения.
background-repeat Определяет, как фоновые изображения выложены «плиткой» после того, как они были измерены и расположены
background-size Определяет размер фоновых изображений.
initial Устанавливает это свойство в значение по умолчанию.
inherit Если указан, связанный элемент принимает вычисленное значение своего свойства background родительского элемента.

Поддержка браузеров

Свойство background поддерживается во всех основных браузерах.

Читайте также

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 5 / 5. Количество оценок: 1

Оценок пока нет. Поставьте оценку первым.