CSS Multiple Backgrounds

Last reviewed on 2026-10-03

Layer images, gradients, and patterns to create complex background designs

CSS multiple backgrounds allow you to layer several background images or gradients on a single element. This powerful feature enables complex visual effects without extra HTML elements or pseudo-elements. You can combine images, gradients, and colors with precise control over each layer's position, size, and repeat behavior.

Understanding Multiple Backgrounds

Multiple backgrounds work by stacking layers, with the first declared background on top and subsequent backgrounds layered beneath. Each layer can have its own set of properties.

Basic Syntax

/* Multiple backgrounds syntax */
.element {
    background: 
        [image/gradient] [position] / [size] [repeat] [attachment] [origin] [clip],
        [image/gradient] [position] / [size] [repeat] [attachment] [origin] [clip],
        [color];
}

/* Simplified example */
.multiple-bg {
    background: 
        url('top-image.png'),
        linear-gradient(to bottom, #000, #333),
        #000;
}

Layer Order and Stacking

Visual Layer Stack

Layer 1 (Top): Semi-transparent overlay

Layer 2: Decorative pattern

Layer 3: Main image

Layer 4 (Bottom): Fallback color

The first layer in your CSS is painted on top; each following layer sits underneath it

Stacking Order Rules

First listed = top. In background-image: A, B, C, layer A is closest to the viewer and C is at the back. This is the opposite of HTML, where later elements paint over earlier ones.
background-color is always at the bottom. It is not a layer in the list: it is painted once, underneath all image layers, no matter where you declare it. In the background shorthand the colour may only appear in the last comma-separated group; putting it in an earlier group makes the whole declaration invalid.
Per-layer properties match by position. The first value of background-size, background-position, background-repeat and so on applies to the first image, the second to the second, etc. If a list is shorter than the number of images, it is repeated to fill; extra values are ignored.
Upper layers need transparency (transparent areas, rgba() colours, or background-blend-mode) for lower layers to show through.

Putting a Gradient Overlay on an Image

A tinted or darkened image is just two layers: the semi-transparent gradient first (on top) and the image second. To get a flat tint rather than a fade, use a gradient with the same colour at both ends, since a plain colour cannot be used as an upper layer.

/* Darken an image so white text stays readable */
.hero {
    background:
        linear-gradient(rgba(0,0,0,0.55), rgba(0,0,0,0.55)),  /* top: flat tint */
        url('hero.jpg') center / cover no-repeat,              /* bottom: image */
        #111;                                                  /* colour under everything */
}

/* Fade to black at the bottom only */
.card {
    background:
        linear-gradient(to bottom, transparent 40%, rgba(0,0,0,0.85)),
        url('card.jpg') center / cover no-repeat;
}

/* Wrong order: the opaque image covers the gradient completely */
.broken {
    background:
        url('hero.jpg') center / cover no-repeat,
        linear-gradient(rgba(0,0,0,0.55), rgba(0,0,0,0.55));
}

Practical Examples

Image + Gradient Overlay

Perfect for hero sections

Gradient Over Image

                                    background: 
    linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.8) 100%),
    url('stars.svg'),
    linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
background-size: cover, 200px 200px, cover;
background-position: center, 0 0, center;
background-repeat: no-repeat, repeat, no-repeat;
                                

Layered Patterns

Complex texture effects

Multiple Pattern Layers

                                    background: 
    repeating-linear-gradient(45deg, transparent, transparent 10px, 
        rgba(255,255,255,0.05) 10px, rgba(255,255,255,0.05) 20px),
    repeating-linear-gradient(-45deg, transparent, transparent 10px, 
        rgba(255,255,255,0.03) 10px, rgba(255,255,255,0.03) 20px),
    radial-gradient(ellipse at center, rgba(255,0,110,0.2), transparent),
    #000;
                                

Animated Layers

Moving gradient meshes

Animated Multiple Backgrounds

                                    background: 
    radial-gradient(circle at 20% 80%, rgba(255,0,110,0.4) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(131,56,236,0.4) 0%, transparent 50%),
    radial-gradient(circle at 40% 40%, rgba(58,134,255,0.4) 0%, transparent 50%),
    #000;
background-size: 600px 600px, 800px 800px, 400px 400px;
animation: layerMove 30s ease-in-out infinite;
                                

Individual Property Control

You can control each layer's properties individually using comma-separated values:

Property-by-Property Syntax

background-image: url('image1.jpg'), url('image2.jpg'), linear-gradient(#000, #333);

Define multiple images/gradients

background-position: top left, center, bottom right;

Position each layer independently

background-size: contain, cover, 100% 100%;

Size each layer differently

background-repeat: no-repeat, repeat-x, repeat;

Control repetition per layer

background-attachment: fixed, scroll, scroll;

Set attachment for each layer

Advanced Techniques

1. Parallax-Style Backgrounds

Parallax Layers

Offset pattern layers create depth

/* Parallax-style multiple backgrounds */
.parallax-bg {
    background: 
        url('foreground.png'),
        url('midground.png'),
        url('background.png'),
        linear-gradient(to bottom, #000033, #000066);
    background-size: 110%, 125%, 150%, cover;
    background-position: center, center, center, center;
    background-attachment: scroll, scroll, fixed, fixed;

    /* On scroll, the "scroll" layers move with the element while the
       "fixed" layers stay put, giving a simple two-speed effect.
       Layers that are all "fixed" do not move at different speeds;
       true multi-speed parallax needs transforms or JavaScript.
       Many mobile browsers ignore background-attachment: fixed. */
}

2. Complex Compositions

Complex Composition

Multiple effects combined

/* Complex multi-layer composition */
.complex-bg {
    background: 
        /* Highlight spots */
        radial-gradient(circle at 20% 50%, rgba(255,255,255,0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 50%, rgba(255,255,255,0.1) 0%, transparent 50%),
        /* Color accent */
        radial-gradient(circle at 50% 50%, rgba(255,0,110,0.3) 0%, transparent 50%),
        /* Vignette */
        linear-gradient(0deg, rgba(0,0,0,0.8) 0%, transparent 30%, transparent 70%, rgba(0,0,0,0.8) 100%),
        /* Grid pattern */
        repeating-linear-gradient(90deg, #111 0px, #111 1px, transparent 1px, transparent 40px),
        /* Base colour (not a layer, so it gets no size value) */
        #000;
    background-size: 600px 600px, 600px 600px, 800px 800px, cover, 40px 40px;
}

3. Responsive Multiple Backgrounds

/* Responsive multiple backgrounds */
.responsive-multi-bg {
    background: 
        url('mobile-overlay.png'),
        url('main-image.jpg'),
        #000;
    background-size: contain, cover, cover;
    background-position: center, center, center;
}

@media (min-width: 768px) {
    .responsive-multi-bg {
        background-image: 
            url('desktop-overlay.png'),
            url('pattern.svg'),
            url('main-image.jpg');
        background-size: contain, 100px 100px, cover;
    }
}

@media (min-width: 1200px) {
    .responsive-multi-bg {
        /* Add more layers for larger screens */
        background-image: 
            linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)),
            url('decorative-element.svg'),
            url('pattern.svg'),
            url('main-image-hd.jpg');
        /* Four layers now, so list four sizes and repeats
           (shorter lists are repeated to fill, which would
           give the main image "contain" here) */
        background-size: cover, contain, 100px 100px, cover;
        background-repeat: no-repeat, no-repeat, repeat, no-repeat;
    }
}

Interactive Background Builder

Build Your Own Multiple Background

Layer 1 (Top)

Type:

Opacity:

Layer 2 (Middle)

Type:

Size:

Base Layer

Base Color:

/* Your generated CSS will appear here */

Performance Optimization

🚀 Layer Limit

Use only the layers you need. Each layer is painted separately, so many large or animated layers increase paint cost, especially on low-end devices.

📐 Size Matters

Use appropriately sized images. Large images in multiple layers can significantly impact performance.

🎯 Animate Carefully

Animating background-position or background-size repaints every frame. For heavy effects, put the background on a pseudo-element and animate its transform or opacity instead.

📱 Mobile Consideration

Simplify or reduce layers on mobile devices where performance is more critical.

♻️ Reuse Gradients

CSS gradients need no download and stay sharp at any size. Use them instead of image textures when possible, but keep very complex gradient stacks in check, since they still have to be painted.

🔍 Test Performance

Use browser dev tools to monitor paint times and composite layers.

Common Use Cases

Hero Sections with Depth

/* Hero section with multiple layers */
.hero {
    min-height: 100vh;
    background: 
        /* Dark overlay for text readability */
        linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.6)),
        /* Decorative pattern */
        url('pattern.svg'),
        /* Main hero image */
        url('hero-image.jpg'),
        /* Fallback color (painted under every layer) */
        #1a1a1a;
    /* Three image layers, so three values each */
    background-size: cover, 50px 50px, cover;
    background-position: center, 0 0, center;
    background-repeat: no-repeat, repeat, no-repeat;
}

Card Designs with Texture

/* Textured card backgrounds */
.textured-card {
    background: 
        /* Subtle gradient overlay */
        linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 100%),
        /* Noise texture */
        url('noise.png'),
        /* Base gradient */
        linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    background-size: cover, 100px 100px, cover;
    background-blend-mode: overlay, multiply, normal;
}

Animated Backgrounds

/* Animated multiple backgrounds:
   animate background-position with one value per layer
   (transform would move the whole element, not a layer) */
@keyframes drift {
    0%, 100% { background-position: 10% 10%, 90% 90%, center; }
    50%      { background-position: 30% 20%, 70% 80%, center; }
}

.animated-multi {
    background:
        url('shape1.svg'),
        url('shape2.svg'),
        linear-gradient(to bottom right, #667eea, #764ba2);
    background-size: 100px 100px, 150px 150px, cover;
    background-position: 10% 10%, 90% 90%, center;
    background-repeat: no-repeat;
    animation: drift 20s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
    .animated-multi { animation: none; }
}

Browser Compatibility

Feature	Chrome	Firefox	Safari	Edge	IE
Multiple backgrounds	✅ Yes	✅ Yes	✅ Yes	✅ 12+	✅ 9+
background-size	✅ Yes	✅ Yes	✅ Yes	✅ 12+	✅ 9+
background-clip	✅ Yes	✅ Yes	✅ Yes	✅ 12+	✅ 9+

All three features are supported unprefixed in every current browser; Internet Explorer 9 was the first IE version to support them.

Tips and Best Practices

✨ Pro Tips

Order Matters: List backgrounds from top to bottom layer
Use Fallbacks: Always include a background-color as the final layer
Optimize Images: Compress and properly size all background images
Test Rendering: Check how backgrounds render during page load
Consider Print: Multiple backgrounds may not print as expected
Gradients First: CSS gradients need no network request, unlike images
Mobile First: Start with fewer layers and add more for larger screens

Debugging Multiple Backgrounds

/* Debugging technique: isolate one layer at a time
   by temporarily replacing the others with "none" */
.debug-backgrounds {
    background-image:
        none,                          /* layer 1 hidden */
        url('pattern.svg'),            /* layer 2 shown */
        none;                          /* layer 3 hidden */
}

/* Or use browser DevTools: edit the background-image
   value in the Styles panel and remove layers one by one
   to see which layer causes the problem */

Conclusion

CSS multiple backgrounds provide incredible flexibility for creating complex, layered designs without additional markup. By understanding layer order, individual property control, and performance considerations, you can create sophisticated visual effects that enhance your web designs while maintaining clean, semantic HTML.

Master Multiple Backgrounds

Start creating complex, layered designs with CSS multiple backgrounds!

Try Background Generator Learn Blend Modes