CSS Advanced
CSS Backgrounds (Advanced)
Modern CSS lets a single element stack several background layers and precisely control how each one is sized, positioned, and clipped. These features power hero banners, gradient overlays, and eye-catching clipped-text effects.
Multiple backgrounds
You can list several backgrounds separated by commas. The first layer sits on top and the last sits at the bottom. This is ideal for layering a gradient over an image or stacking decorative patterns.
.hero {
background:
linear-gradient(rgba(0,0,0,.5), rgba(0,0,0,.5)), /* top layer */
url(photo.jpg); /* bottom layer */
background-size: cover;
}background-size
background-size scales the image. Two special keywords cover the most common needs, and you can also give explicit lengths or percentages.
| Value | Effect |
|---|---|
| cover | Scale to fill the box, cropping overflow |
| contain | Scale so the whole image fits, may leave gaps |
| auto | Use the image's natural size |
| 200px 100px | Explicit width and height |
<!DOCTYPE html>
<html>
<head>
<style>
body { margin: 0; font-family: sans-serif; }
.hero {
height: 220px; display: flex;
align-items: center; justify-content: center;
color: #fff; font-size: 26px; font-weight: bold;
background:
linear-gradient(120deg, rgba(99,102,241,.85), rgba(236,72,153,.55)),
radial-gradient(circle at 80% 20%, #fde68a, transparent 60%),
#0f172a;
}
</style>
</head>
<body>
<div class="hero">Layered Backgrounds</div>
</body>
</html>background-origin and background-clip
background-origin sets the reference box from which the background positions (border-box, padding-box, or content-box). background-clip decides how far the background is painted. The special value text clips the background to the shape of the text.
<!DOCTYPE html>
<html>
<head>
<style>
body { font-family: sans-serif; background: #0b1020; display: grid; place-items: center; height: 240px; }
.gradient-text {
font-size: 56px; font-weight: 900;
background: linear-gradient(90deg, #22d3ee, #a78bfa, #f472b6);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
</style>
</head>
<body>
<h1 class="gradient-text">Clipped Text</h1>
</body>
</html>For gradient text, include both -webkit-background-clip: text and background-clip: text, and set color: transparent so the gradient shows through the letters.
When you set multiple backgrounds, comma-separated background-size, background-position, and background-repeat values map to each layer in order.
Key points
- Comma-separated backgrounds stack; the first listed is on top.
- background-size: cover fills and crops; contain fits fully.
- background-origin sets which box positioning starts from.
- background-clip: text plus transparent color makes gradient text.
- Per-layer properties are matched by position in the comma list.