Menu
Styling Text & Links
CSS Backgrounds
Colors, images, gradients.
1Backgrounds
Set background color or image.
Example Code
css
div {
background-color: #f0f0f0;
background-image: url('bg.jpg');
background-size: cover;
}2Understand it in a real interface
Background images are decoration from the document’s perspective; they do not provide an image alternative. Use an actual image element when the picture communicates information. Multiple background layers paint in order, which lets a gradient overlay sit above a photograph and improve visual consistency.
3Try it yourself
Give a hero a solid fallback color, a background image, and a subtle overlay. Resize it and inspect the crop. Remove the image entirely and check whether the heading and call to action still communicate the page’s purpose.
Finished reading?
Mark this topic as complete to track progress.