CSS 3: несколько бэкгранудов для одного блока
Появление поддержки CSS 3 в современных браузерах расширяет возможности и упрощает работу для разработчиков web-приложений.
Ранее в CSS 2 бэкгрануд (фоновое изображение) для блока мог быть задан только один:
#box {background: url(1.png) no-repeat center;}
Для создания нескольких бэкграундов приходилось создовать несколько дочерних блоков и для каждого из них отдельно прописывать свойства.
Теперь же фоновые изображения можно перечислять через запятую:
#box {background:url(1.png) top left no-repeat,url(2.png) top right no-repeat,url(3.png) bottom right no-repeat,url(4.png) bottom left no-repeat;}
Параметры позиционирования: top, bottom, right, left и параметры для определения повтора элемента: repeat-x, repeat-y, no-repeat перешли из предыдущей спецификации без изменений.
Вы можете просмотреть пример, но к сожалению он будет работать только в современных браузерах, поддерживающих спецификацию CSS 3.