Как сделать несколько фонов в блоке

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

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

#example {
  background: url(image1.png) right bottom no-repeat,
  url(image2.png) left top repeat;
}

Это делается как с помощью сокращённого свойства background, так и с помощью отдельных свойств: background-attachment, background-clip, background-image, background-origin, background-position, background-repeat, background-size. Главное — строго соблюдать порядок. Если фон идёт первым по списку, значит и все его свойства должны быть первыми. У второго вторыми. И так далее.

#example {
  background-image: url(image1.png), url(image2.png);
  background-position: right bottom, left top;
  background-repeat: no-repeat, repeat;
}

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

See the Pen Сделать несколько фонов в блоке by Ivan (@DanilinBiz) on CodePen.

Синюю картинку прижимаем сверху, красную — снизу.
И включаем им репит по горизонтали.