Универсальное свойство 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, связанные с границами и фоном

Перевод статьи «background» был подготовлен дружной командой проекта Сайтостроение от А до Я.