Множественные фоновые изображения — интересная возможность CSS3. Синтаксис прост: нужно только разделить значения разных изображений запятой. Нам кажется, что проще и лучше использовать сокращенную запись свойства фона, в которой можно задать расположение, повторение и другие параметры, и при этом все будет сгруппировано и понятно.

Может быть, не совсем очевидно из синтаксиса, какое изображение располагается выше в «стопке» изоражений, там, где изображения накладываются друг на друга. Спецификация однозначно отвечает на этот вопрос, и реализации браузеров поддерживают это правильно. Первое изображение находится на самом верху, а следующие — ниже него в соответствующем порядке:

background:
   url(number.png) 600px 10px no-repeat,  /* на самом верху, соответствует z-index: 4; */
   url(thingy.png) 10px 10px no-repeat,   /* соответствует z-index: 3; */
   url(Paper-4.png);                      /* в самом низу, соответствует z-index: 1; */

Можно сказать, что это соответствует свойству z-index, но это не это свойство, так как все изображения — часть одного элемента.

Возможно, это не совсем интуитивно понятно, так как это прямо противоположно тому, как работает код HTML по умолчанию. Если у всех элементов одинаковое значение свойства z-index и они расположены так, что накрывают друг друга, то последний, а не первый элемент будет на самом верху. Но это надо просто понять и запомнить.

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

Так же не забывайте, что хотя свойство множественных фоновых изображений очень широко поддерживается, в старых версиях браузеров, не поддерживающих это свойство, при его применении не будет показано ничего. Так что будьте внимательн и, если по каким-то причинам Вам нужна поддержка старых версий браузеров, используйте библиотеку JavaScript Modernizr. У них даже есть пример подобного использования на сайте:

.multiplebgs body {
   /* Отличные множественные фоновые изображения */
}
.no-muliplebgs body {
  /* Невпечатляющий запасной вариант */
}

Автор урока Chris Coyier

Перевод — Дежурка

Смотрите также:

• Использование таблиц стилей браузеров и значения CSS3 по умолчанию
• Различные методы для размещения объекта ровно по центру
• Использование фона у тега body