How to Use Multiple Backgrounds in CSS: Practical Examples

CSS allows more than one background layer to be applied to the same element. This is useful when a design needs a texture, gradient, decorative image and base colour without adding extra HTML elements.

Basic syntax

Multiple background layers are separated with commas. The first layer is painted above the following background layers.

.hero {
  background:
    url("pattern.webp") no-repeat center,
    linear-gradient(rgba(0,0,0,.55), rgba(0,0,0,.55)),
    #111;
}

Understanding the layer order

In a multiple-background declaration, the first listed image is the top layer. This is important when combining transparent PNG or WebP artwork with gradients and colours.

Using background-size

.hero {
  background:
    url("shape.webp") no-repeat right center / 420px auto,
    linear-gradient(135deg, #111, #333);
}

The slash separates the background position from the background size. This allows a decorative image to be sized independently from the base layer.

Different positions for different layers

.banner {
  background:
    url("top-shape.webp") no-repeat right top,
    url("bottom-shape.webp") no-repeat left bottom,
    #f5f5f5;
}

Each layer can have its own position. This is useful for decorative shapes placed in opposite corners.

Multiple gradients

Background layers do not have to be image files. Gradients can also be layered.

.card {
  background:
    linear-gradient(120deg, rgba(255,255,255,.08), transparent),
    radial-gradient(circle at top right, rgba(255,255,255,.12), transparent 45%),
    #171717;
}

Responsive backgrounds

Large decorative images can affect performance on mobile devices. Use appropriately sized assets and adjust the background size or hide purely decorative layers at smaller breakpoints when necessary.

Common mistakes

• Forgetting commas between background layers.
• Assuming the last listed layer appears on top.
• Using unnecessarily large background images.
• Forgetting to test the composition on mobile screens.
• Using decorative backgrounds where they reduce text readability.

When should you use multiple backgrounds?

They are useful for decorative effects, hero sections, cards, overlays and textured components. If a visual needs semantic meaning or accessibility support, an actual image element with suitable alternative text may be more appropriate.

Conclusion

Multiple backgrounds are a simple but powerful CSS feature. By understanding layer order, position, size and responsive behaviour, you can create richer interfaces without adding unnecessary markup.