CSS Colors and Backgrounds

Layered Backgrounds

Written by Swapnil RajaPublished 30 Jul 2026

Layer background images, control their painting area, and use borders that are more than a solid line. You will layer gradients and images, control their size and painting boxes, and create image- or gradient-based border treatments.

Multiple backgrounds are comma-separated paint layers on one box. The first layer is closest to the viewer, and the background color is painted beneath the final image layer.

Layered backgrounds are useful when a design needs an overlay, texture, and image without additional HTML. Each layer may have its own position, size, repeat, origin, and clip. Reading the shorthand from layer to layer is essential because a missing value can silently use its initial behavior. This topic also connects with CSS Background Image and CSS Gradients.

Background layers are painted front to back

Example

css

.hero {
  background:
    linear-gradient(rgb(15 23 42 / 0.72), rgb(15 23 42 / 0.72)),
    url("https://picsum.photos/seed/coast/1200/600") center / cover no-repeat;
}

Comma-separated background values form layers. The first is closest to the viewer. Only the final layer may specify a background color.

Control the painting and positioning boxes

Example

css

.label {
  border: 0.5rem solid transparent;
  padding: 1rem;
  background:
    linear-gradient(white, white) padding-box,
    linear-gradient(135deg, #06b6d4, #7c3aed) border-box;
}

background-origin chooses the positioning box; background-clip chooses how far a background is painted. The shorthand above uses both to create a gradient border.

Useful companion properties

background-size: explicit sizes, cover, or contain
background-attachment: scrolling behavior of the image
border-image: slices an image or gradient around the border
box-decoration-break: controls decoration across fragmented inline boxes

Background Layer Properties

Property	Purpose	Example
background-image	Lists paint layers from front to back.	linear-gradient(...), url(...)
background-position	Positions each background layer.	center, top right
background-size	Sets each layer's rendered size.	cover, 4rem 4rem
background-clip	Limits the painting area.	padding-box

Complete Example

Run the complete document below in the Try It editor. Resize the preview or interact with the controls where the example calls for it.

Complete runnable example

html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Layered Backgrounds example</title>
  <style>
    * { box-sizing: border-box; }
    body {
      margin: 0;
      padding: 2rem;
      font-family: system-ui, sans-serif;
      line-height: 1.5;
    }
    main { max-width: 70rem; margin-inline: auto; }
    article, section, aside, form, .card, .panel {
      padding: 1rem;
      border: 1px solid #cbd5e1;
      border-radius: 0.6rem;
    }

.hero {
  background:
    linear-gradient(rgb(15 23 42 / 0.72), rgb(15 23 42 / 0.72)),
    url("https://picsum.photos/seed/coast/1200/600") center / cover no-repeat;
}

.label {
  border: 0.5rem solid transparent;
  padding: 1rem;
  background:
    linear-gradient(white, white) padding-box,
    linear-gradient(135deg, #06b6d4, #7c3aed) border-box;
}
  </style>
</head>
<body>
  <main><section class="hero"><h1>Layered backgrounds</h1><p>The gradient remains visible even if the image is unavailable.</p></section><p class="label">Gradient border</p></main>
</body>
</html>

Browser Support

Feature	Chrome	Edge	Firefox	Safari
Multiple backgrounds	1	12	3.6	1.3

Versions show the first stable desktop release with unprefixed support. Data source: MDN Browser Compatibility Data 8.0.8. A partial-support note is included where it changes how the example behaves.

Notes

Test the example with real content, keyboard input, browser zoom, and the narrowest layout your project supports.
Use a fallback when the support table shows that one of your required browsers predates the feature.

Conclusion

Treat comma-separated backgrounds as ordered paint layers and define which box controls each layer.

Use layers for decoration that belongs to one element and keep meaningful images in HTML. When a background carries information, it cannot provide alternative text and may disappear in high-contrast or print contexts. The content should still make sense without it.

PreviousCSS Background Image NextCSS Text Color