Multiple Backgrounds

CSS allows multiple background layers on a single element by separating values with commas. Each layer can have its own image, position, size, and repeat behaviour. The first value in the list is the topmost layer.

Layer Order

Background images stack with the first being on top. background-color always sits at the very bottom of all layers.

Independent Control

When specifying multiple values for shorthand sub-properties (like background-position or background-size), use a comma-separated list that mirrors the image list: one value per layer.

Example

/* Two gradient layers + colour fallback */
.layered {
    background-color: #0d47a1;
    background-image:
        radial-gradient(
            circle at 20% 80%,
            rgba(255,255,255,0.15) 0%,
            transparent 50%
        ),
        radial-gradient(
            circle at 80% 20%,
            rgba(255,255,255,0.1) 0%,
            transparent 50%
        ),
        linear-gradient(135deg, #1a73e8 0%, #0d47a1 100%);
}

/* Image on top of a pattern */
.card-hero {
    background-image:
        url("/img/logo.svg"),
        url("/img/dots.svg");
    background-position: center center, 0 0;
    background-size: 100px, auto;
    background-repeat: no-repeat, repeat;
}

CSS

Full Editor

Pro Tip

Keep the number of background layers small — each layer requires an additional compositing pass by the browser. More than three to four layers on many elements simultaneously can degrade paint performance.

Related Resources

CSS Reference

Complete tag & property list

CSS How-To Guides

Step-by-step practical guides

CSS Exercises

Practice what you've learned