В CSS3 несколько фонов одному элементу можно задать с помощью множественных фонов:
background:
url('img1.png') no-repeat 0 0,
url('img2.png') repeat-x 50% 50%,
url('img3.png');
или
background-image: url('img1.png'), url('img3.png'); background-repeat: repeat-y, repeat-y; background-position: left, right;
Картинка img3.png
будет в нижнем слое, а img1.png
в верхнем. В множественных фоновых изображениях нельзя задавать фоновый цвет, поэтому он зачастую выносится в отдельный блок.
Существует и другая техника. Суть её заключается в том, что мы вкладываем элементы друг в друга и делаем их одинакового размера, а затем каждому элементу задаём свой фон. Т.е. каждый элемент служит одним слоем фона.
Фоны вложенных элементов перекрывают друг друга: чем глубже элемент, тем выше его фон.