A hero image is a large, eye-catching photo or illustration that fills a page’s width—and usually its height—when visitors first arrive. It sits in the header behind page content, helping the page make a strong first impression. section 7.3.1 section 7.6
Choose an image that fits the page topic, looks dramatic, and stays clear at a large size. Avoid pixelation, poor lighting, and busy details that make title or tagline text hard to read. For many larger screens, a 1,200-pixel-wide 16:9 image is a useful starting point. section 7.3.1
header {
background: url('hero.jpg') no-repeat center center fixed;
background-size: cover;
}
A hero image can be applied as the header’s CSS background. The cover setting expands the image to fill the header, while centering keeps its middle area in view. section 7.3.1
Add one to a home-page request
Ask for “a header that uses the file hero.jpg as a hero image,” then include the page title, tagline, and navigation links you want in that header. Save the image alongside the generated HTML and CSS files so the background file can be found. section 7.3.2
If text needs more contrast, darken the image with a CSS linear-gradient overlay. In rgba values, numbers closer to 0 make the overlay lighter; numbers closer to 1 make it darker. A darker overlay can preserve readability without replacing the image. section 7.4.3
Practical checks before publishing a hero image:
- Match the subject to the page topic and use a well-composed, high-quality image. section 7.3.1
- Keep the image large enough for the display area so browser scaling does not distort it. section 7.3.1
- Check that headings, taglines, and navigation remain readable over the image; add a dark overlay when needed. section 7.3.1 section 7.4.3
