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

После выхода последней спецификации стилей CSS3 стало возможным устанавливать для определенного блока несколько фоновых картинок. Это делается посредством свойства background. Все по старинке, указываем все параметры для первого изображения, ставим запятую и вносим параметры по второму. Ничего сложного, как видите, нет.

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

CSS

div {
	background:url(line1.png) no-repeat top center,
 url(line2.png) no-repeat bottom center;
	background-size:100%;
  }

Убедимся, что все работает в браузере

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

В каких браузерах работает?