Несколько фонов

Несколько фонов одному элементу можно задать с помощью множественных фонов. Эта и другие возможности рассмотрены в продолжении курса — «Рамки и фоны, часть 2».

А сейчас рассмотрим старую надёжную технику создания нескольких фонов.

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

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

Кстати, для удобства ширину лучше задавать внешнему элементу (так как все вложенные будут той же ширины), а высоту самому глубокому, так как он растянет по высоте всех своих родителей.