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 поддерживается во всех основных браузерах.

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

Похожие посты

CSS-свойство clip

Определяет координаты области, которая будет кадрирована, т.е. содержимое за пределом этой области будет отрезано

CSS-свойство bottom

Задает смещение или отступ от нижнего края элемента

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

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

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

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