Универсальное свойство background
Свойство background является объединенным свойством для определения большинства характеристик CSS фона. В короткой форме оно может принимать несколько значений, которые разделяются через запятую, каждое значение соответствует слою фона:
background: [ <bg-layer> , ]* <final-bg-layer>Каждый фоновый слой определяет свои значения свойств:
<bg-layer> = <bg-image> || <position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box>{1,2}Для каждого слоя объединенное свойство задает сначала свойства background-image, background-position, background-size, background-repeat, background-origin, background-clip и background-attachment, а затем присваиваются все остальные значения.
Другими словами, объединенное свойство background присваивает заданные значения явно, а также задает изначальные наборы значений для характеристик, значения которых пропущены.
Это означает, что если вы используете сокращенное свойство background и указываете только некоторые из свойств фона, то другим параметрам будут присвоены их изначальные значения объединенного свойства.
В следующем примере мы используем сокращенное свойство background, но указываем только значение для background-attachment:
.element {
background: fixed;
}Приведенное выше выражение равносильно следующему:
.element {
background-color: transparent; /* изначальное значение */
background-position: 0% 0%; /* изначальное значение */
background-size: auto auto; /* изначальное значение */
background-repeat: repeat repeat; /* изначальное значение */
background-clip: border-box; /* изначальное значение */
background-origin: padding-box; /* изначальное значение */
background-attachment: fixed; /* объявленное значение из сокращенного свойства */
background-image: none; /* изначальное значение */
}Когда для элемента в одном объединенном свойстве объявляется несколько фоновых слоев, то в конце устанавливается значение background-color как часть последнего CSS фонового изображения:
<final-bg-layer> = <bg-image> || <position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box>{1,2} || <'background-color'>Свойство background-color может определяться только в последнем фоновом слое, потому что существует только один цвет фона для всего элемента.
Для <box> может задаваться одно из трех возможных значений: padding-box, content-box и border-box.
И, background-clip и background-origin могут принимать значение <box>. Но как быть, если в сокращённом свойстве указано только одно значение ? Тогда оно устанавливается для обоих параметров. Если указаны два значения, то первое устанавливается для background-origin, а второе - для background-clip.
Официальный синтаксис
Синтаксис:
background: [ <bg-layer> , ]* <final-bg-layer>
/* где */
<bg-layer> = <bg-image> || <position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box>{1,2}
/* и */
<final-bg-layer> = <bg-image> || <position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box>{1,2} || <'background-color'>Изначальные значения: Ниже приводится перечень начальных значений для конкретных свойств фона в CSS:
- background-image: none;
- background-position: 0% 0%;
- background-size: auto auto;
- background-repeat: repeat;
- background-origin: padding-box;
- background-clip: border-box;
- background-attachment: scroll;
- background-color: transparent.
Применяется: ко всем элементам
Возможность анимации: только свойства background-color, background-position и background-size могут быть анимированы
Примечания
Значения отдельных свойств фона в объединенном свойстве background могут перемещаться. Единственное жесткое требование - свойство CSS background size должно определяться после свойства background-position, и они должны быть разделены символом "/". Вы не можете указать в объединенном свойстве размер фона, если не задаете позицию фона, в противном случае объявление является недействительным.
Примеры
В приведенном ниже коде с помощью объединенного свойства устанавливается фоновое изображение для элемента:
.element {
background: #eee url(path/to/image.jpg) top 50% / contain fixed no-repeat;
}Приведенное выше объявление эквивалентно следующему:
.element {
background-image: url(path/to/image.jpg);
background-color: #eee;
background-position: top 50%;
background-size: contain;
background-repeat: no-repeat;
background-attachment: fixed;
background-origin: padding-box; /* начальное значение */
backgrounnd-clip: border-box; /* начальное значение */
}Еще один пример и его эквивалент:
div {
background: padding-box url(something.png) deepPink center center;
}
/* Эквивалент */
div {
background-color: deepPink;
background-image: url(something.jpg);
background-repeat: repeat; /* initial */
background-attachment: scroll; /* initial */
background-position: center center;
/* в сокращенном объявлении указано только одно значение <box>,
таким образом, оно присваивается и свойству background-origin,
и свойству background-clip */
background-clip: padding-box;
background-origin: padding-box;
background-size: auto auto;
}В следующем примере используется сокращенное свойство background, чтобы задать элементу слоев фона для сайта CSS:
.element {
background: url(a.png) top left no-repeat,
url(b.png) center / 100% 100% no-repeat,
url(c.png) white;
}Данное объединенное свойство эквивалентно следующим одиночным свойствам:
.element {
background-image: url(a.png), url(b.png), url(c.png);
background-position: top left, center, top left;
background-repeat: no-repeat, no-repeat no-repeat, repeat;
background-clip: border-box, border-box, border-box;
background-origin: padding-box, padding-box, padding-box;
background-size: auto auto, 100% 100%, auto auto;
background-attachment: scroll, scroll, scroll;
background-color: white;
}Демо-версия
Приведенная ниже демо-версия демонстрирует, как использовать несколько фоновых изображений:
Посмотреть демо-версию
Поддержка браузерами
Объединенное свойство background поддерживается во всех основных браузерах: Chrome, Firefox, Safari, Opera, IE, а также на Android и iOS.
Но все одиночные свойства CSS цвета фона поддерживаются во всех браузерах. Для получения дополнительной информации о поддержке браузерами одиночных свойств ознакомьтесь с соответствующими разделами документации:
Свойства CSS3, связанные с границами и фоном