HTML\CSS → Как с помощью background сделать несколько фонов

В 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 в верхнем. В множественных фоновых изображениях нельзя задавать фоновый цвет, поэтому он зачастую выносится в отдельный блок.

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

Фоны вложенных элементов перекрывают друг друга: чем глубже элемент, тем выше его фон.