CSS Colors and Backgrounds
Layered Backgrounds
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("/images/coast.webp") 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, orcontainbackground-attachment: scrolling behavior of the imageborder-image: slices an image or gradient around the borderbox-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("/images/coast.webp") 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.