Backgrounds and Gradients
Backgrounds can use colors, images, gradients, multiple layers, positioning, sizing, repetition, and clipping. Gradients are generated by the browser and do not require image files.
Multiple backgrounds are painted in layers, with the first background image generally appearing closest to the user.
Background Painting Layers
Layered Background
.hero {
background:
linear-gradient(rgb(15 23 42 / 0.72), rgb(15 23 42 / 0.72)),
url("hero.jpg") center / cover no-repeat;
}💡 The gradient creates an overlay over the image, improving text readability.
Key Takeaways
- CSS gradients can replace many decorative raster assets.
- Multiple background layers can create sophisticated visual effects.
Knowledge Check
What does `background-size: cover` generally do?