Multiple Backgrounds in CSS

CSS allows us to assign multiple background layers to a single element. These can be images, colors, or even gradients, listed separated by commas. The order determines which layer is on top and which is underneath.

Basics: multiple images stacked

If you want to use multiple images as backgrounds, simply list them separated by commas in the background-image property. The first image will appear on top, and the following ones underneath.

In this example, two images are used in the background: a starry sky and a moon. Positioning is used to control where they appear.

Combining gradients and images

Gradients can also be used as backgrounds and combined with images. This is useful, for example, if you want to darken an image without modifying the actual image file.

Here, a linear gradient is placed over the image, adding a transparent black layer to the landscape. This is a common solution to improve text readability.

Tips for multiple backgrounds

Some practical advice for using multiple backgrounds:

• Always check that background images fit well on smaller screens.
• Use gradients to highlight text from the background.
• The order determines layering: the first layer is always on top.