A hero image is an eye-catching photo or illustration placed behind the opening content of a page. It fills the browser width and often its full height, so it is the first big visual visitors meet—not exactly a shy little thumbnail. section 6.11 section 10.5
Use a hero image to grab attention immediately. On a landing page, the header can pair that background with product information and a call-to-action button. Choose an image that looks striking or tells a product-relevant story, but keep the header text readable over it. section 6.11 section 10.5
A full-window hero needs three basic moves:
- Start with a block element, such as a div, at the beginning of the page. section 6.11
- Give that element a width of 100vw and height of 100vh. These units each represent one one-hundredth of the browser window’s width or height. section 6.11
- Add the background image, center it with background-position: center center, and use background-size: cover so the image covers the entire block. section 6.11
A simple full-window welcome
This wrapper holds introductory headings while a Toronto photo becomes the background. The main content follows outside the hero, so the page has a clear opening moment before getting down to business. section 6.11
.hero-image {
width: 100vw; #1
height: 100vh; #1
background-image: url(/images/toronto.jpg); #2
background-position: center center; #2
background-size: cover; #3
}
This CSS combines viewport sizing with a centered background and cover sizing. Swap the image URL for your own image file. section 6.11
Landing-page header
A landing-page header can use a hero background behind a product image and product details. Here the background is fixed, positioned at the right center, and sized to cover the viewport. section 10.5
.header {
background: url(/images/landing-page-header-bg.jpg);
background-attachment: fixed; #1
background-position: right center;
background-size: cover;
padding-bottom: 1em;
width: 100vw;
height: 100vh;
}
This header rule shows a hero background applied to a landing-page header. section 10.5
