Multiple backgrounds

You can use multiple backgrounds to set multiple backgrounds for one element.

We will cover this and other options in the continuation of this section, “Frames and Backgrounds: An Immersion Course”.

Now let’s take a look at one old and reliable technique for creating multiple backgrounds.

The essence of the technique is to nest elements one inside the other and make them the same size, and then set a background for each element. That is, each element functions as one layer of the background.

The backgrounds of the nested elements overlap each other: the deeper the element, the higher its background.

By the way, for the sake of convenience, it is better to assign a width to the outer element (since all nested elements will have the same width) and a height to the deepest element, since it will stretch to the height of all its parents.