Some links on this page are affiliate links: if you buy through them we may earn a commission, at no extra cost to you.
Use an <img> when the hero image conveys information, and use a CSS background-image when it is purely decorative. For a typical content image, put the image and real HTML heading and call to action in a hero section, then use CSS positioning and object-fit: cover to make the image fill the layout. Give the image meaningful alt text—or alt="" if it adds no information—and do not lazy-load it when it is visible at the top of the page.
Choose an image element or a CSS background
The right implementation depends on what the image means to the reader:
- Use
<img>for meaningful content. The image belongs in the document, can have alternative text, and can use responsive image sources. - Use a CSS background for decoration. This suits an image that adds atmosphere or texture but does not convey information that the page needs to express.
In either case, keep the hero heading, supporting copy, and buttons as HTML. Text embedded in an image is harder to select, adapt to different screens, translate, and make accessible. The image should support the words, not replace them.
Do these 3 things before closing this tab:
1Repair Windows errors before they cause bigger problems2Scan for outdated or missing drivers - takes under a minute3Clear out junk files and repair common Windows errorsAdd a content image with HTML and CSS
This example places a meaningful image behind readable HTML content. The image fills the hero area and is cropped as needed; the heading and link remain ordinary page content.
#1 Best Overall
- Cool Minimal HTML Tag T-Shirt
- Web Designer Tee Shirts T-Shirts for Web Developers and Web Designers
- Lightweight, Classic fit, Double-needle sleeve and bottom hem
<section class="hero" aria-labelledby="hero-title">
<img
class="hero__image"
src="images/mountain-trail.jpg"
alt="Hikers following a trail along a mountain ridge"
width="1600"
height="900"
fetchpriority="high"
>
<div class="hero__content">
<h1 id="hero-title">Find your next trail</h1>
<p>Explore guided walks across the high country.</p>
<a class="hero__button" href="/trails/">Browse trails</a>
</div>
</section>.hero {
position: relative;
min-height: 28rem;
display: grid;
place-items: center;
overflow: hidden;
background: #263746;
}
.hero__image {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.hero__content {
position: relative;
z-index: 1;
width: min(100% - 2rem, 65ch);
padding: 2rem 0;
color: white;
}
.hero__content h1 {
max-width: 15ch;
margin: 0 0 1rem;
font-size: clamp(2.25rem, 6vw, 4.5rem);
line-height: 1.05;
}
.hero__button {
display: inline-block;
margin-top: 1rem;
padding: 0.75rem 1rem;
color: #13212b;
background: white;
text-decoration: none;
border-radius: 0.25rem;
}
.hero__button:focus-visible {
outline: 3px solid #f5c84b;
outline-offset: 3px;
}What the layout rules do
position: relativeon the section gives the absolutely positioned image a containing block.inset: 0makes the image cover the hero box, whilewidthandheightmake its box fill that space.object-fit: coverfills the box without distorting the image. It crops whichever edges do not fit.- The content’s relative positioning and higher stacking order place it over the image.
- The
min-heightcreates a substantial hero area without forcing the section to stay a fixed height if its text needs more room.
The example’s alt text is specific to its sample image. Replace it with a concise description of the information your own image contributes. If the image is only atmospheric and the nearby text already communicates everything important, set alt="" instead.
Make the hero responsive
A hero can use the same composition at several resolutions, or use a different crop for a narrow screen. Choose the HTML feature that matches your image files:
| Need | Use | What it does |
|---|---|---|
| Same composition, different file sizes | srcset and sizes |
Offers candidate files so the browser can select an appropriate resource for the rendered image and display conditions. |
| A different crop or composition on mobile | <picture> with <source> |
Lets the page offer a breakpoint-specific source for art direction. |
| Fill a controlled box with a crop | CSS object-fit: cover |
Maintains the image’s proportions while cropping the overflow. |
Offer multiple resolutions with srcset and sizes
Use candidate files that show the same composition. The sizes value should describe how wide the image is expected to appear in the layout, not simply list the source file widths.
Rank #2
- UX Designer - Funny Embed T-Shirt Design.
- A fun shirt as a gift idea for any frontend designer, HTML and CSS expert and web designer.
- Lightweight, Classic fit, Double-needle sleeve and bottom hem
<img
class="hero__image"
src="images/hero-1600.jpg"
srcset="images/hero-800.jpg 800w, images/hero-1600.jpg 1600w, images/hero-2400.jpg 2400w"
sizes="100vw"
alt="Hikers following a trail along a mountain ridge"
width="1600"
height="900"
fetchpriority="high"
>Here the hero spans the viewport, so 100vw describes its approximate display width. If your design gives the image a narrower maximum width or places it beside another column, set sizes to match that layout. Keep the fallback src valid for browsers that do not use the candidate list.
Use a different mobile crop with <picture>
Use art direction when a narrow-screen composition should keep a different focal subject visible, rather than just downloading a smaller version of the same framing.
<picture>
<source
media="(max-width: 40rem)"
srcset="images/hero-mobile.jpg"
>
<img
class="hero__image"
src="images/hero-desktop.jpg"
alt="Hikers following a trail along a mountain ridge"
width="1600"
height="900"
fetchpriority="high"
>
</picture>The <img> remains the image element and fallback. If you combine art direction with resolution candidates, make sure each source set and its conditions correspond to the intended crop. Test the narrow layout with the actual mobile image: object-fit can still crop it further if the hero box’s aspect ratio differs from the file.
Rank #3
- Do you like programming the web with HTML or CSS? Sounds like you need to buy this IT div Tag HTML Nerd Development Programming Geek Developer T Shirt. Perfect for someone who likes IT web development.
- Please refer to provided sizing chart to make sure you get the appropriate size IT div Tag HTML Nerd Development Programming Geek Developer T-Shirt.
- Lightweight, Classic fit, Double-needle sleeve and bottom hem
Keep the focal point in view
object-fit: cover necessarily removes part of an image when its aspect ratio does not match the hero box. Use object-position to shift the crop toward the important subject, for example:
Quick wins for a faster PC:
Clear out junk files and repair common Windows errorsFree Scan →Scan for outdated or missing drivers - takes under a minuteDriver Scan →Repair Windows errors before they cause bigger problemsFix Now →.hero__image {
object-fit: cover;
object-position: 65% center;
}For different focal positions at different widths, use a media query. Do not assume a crop that works on a wide monitor will preserve a face, product, or other focal detail on a narrow phone.
Use a background image when it is decorative
A CSS background is appropriate when the image is visual decoration rather than content. It has no image alternative text, so do not use it as the only way to convey information. Keep the meaningful copy in HTML and make sure it remains readable over the background.
<section class="hero hero--decorative">
<div class="hero__content">
<h1>A calmer way to plan</h1>
<p>Make room for the work that matters.</p>
<a href="/get-started/">Get started</a>
</div>
</section>.hero--decorative {
min-height: 28rem;
display: grid;
place-items: center;
padding: 2rem;
color: white;
background-color: #263746;
background-image: linear-gradient(rgb(0 0 0 / 45%), rgb(0 0 0 / 45%)), url("images/decorative-hero.jpg");
background-position: center;
background-size: cover;
}The fallback background color prevents the section from depending on the image for its base appearance. The dark overlay is one way to improve legibility, but no overlay guarantees readable contrast for every image and text placement. Check the actual crop, text, and interactive controls at every viewport you support; adjust the image, overlay, text color, or placement if any content is difficult to read.
Set alt text and semantics deliberately
Every <img> should have an alt attribute. Write concise alt text when the image contributes information the surrounding text does not already provide. Use alt="" when the image is decorative or entirely redundant with nearby content. Do not write a description of the image’s visual styling in place of its purpose, and avoid repeating the heading or adjacent copy unless the image adds that information.
In the first example, the section’s aria-labelledby points to its heading. Use a heading level that fits the page outline; a hero does not automatically need an h1 if the document’s main heading is elsewhere. Keep button and link labels descriptive enough to make sense in context.
Best Value
- Brand: Wiley
- Set of 2 Volumes
- A handy two-book set that uniquely combines related technologies Highly visual format and accessible language makes these books highly effective learning tools Perfect for beginning web designers and front-end developers
Load the hero without delaying the page
A prominent image visible immediately after navigation may be the page’s Largest Contentful Paint candidate. Make it discoverable in the initial HTML and do not add loading="lazy" to that above-the-fold hero image. Web.dev’s responsive-images guidance says: “For a hero image above the fold, don’t use loading.”
- Reserve layout space. Provide accurate intrinsic
widthandheightattributes. CSS can still size the image fluidly; the dimensions help the browser account for its aspect ratio before it loads. - Prioritize selectively.
fetchpriority="high"can be appropriate if this is genuinely the critical image, but do not mark every image as high priority. Prioritizing one resource can affect others. - Do not preload by default. A hero in the initial HTML is normally discoverable without a preload hint. Preloading may help a background image or an image inserted by JavaScript, but use it sparingly and ensure responsive preload candidates agree with the image the page will render; otherwise the browser may download an unnecessary file.
- Lazy-load later images. Use lazy loading for images below the fold rather than for the initial visible hero.
These practices support a good loading strategy, but they do not guarantee a particular LCP result. Actual performance depends on the page, the image files, and the conditions under which it loads.
Troubleshoot common hero-image problems
| Symptom | Likely cause | What to check or change |
|---|---|---|
| The image does not appear | The file path is wrong, the request fails, or the image is hidden behind another layer. | Open the image URL directly, check the browser’s network panel for a failed request, confirm the path and filename case, and inspect the image’s computed position and stacking order. |
| The image is stretched or distorted | The image is being forced into a box without preserving its proportions. | For a filled hero box, use object-fit: cover. If showing the entire image matters more than filling the box, consider object-fit: contain or an unconstrained natural ratio. |
| The subject is cut off | The box and image have different aspect ratios, so cover cropping removes part of the source. | Adjust object-position, change the hero dimensions, or supply an alternate composition using <picture>. |
| Text is hard to read | The image is busy or the text crosses bright and dark areas. | Check the real responsive crops. Add or adjust a deliberate overlay, move the text, or choose a less busy image; ensure links and focus indicators remain visible too. |
| The page shifts when the image loads | The browser did not have enough information about the image’s space before it arrived. | Set the image’s intrinsic width and height and avoid CSS that changes its layout unpredictably. |
| The wrong image appears on a phone | The browser may be selecting from candidates that share the desktop composition, or a source condition may not match the intended breakpoint. | Check srcset, sizes, and the <picture> media conditions. Use a separate art-directed crop when the composition must change. |
| The hero loads late | The image may be lazy-loaded despite being initially visible, discovered only after JavaScript runs, or competing with other prioritized resources. | Put a content image in initial HTML, remove lazy loading from the visible hero, and reserve high fetch priority for the genuinely critical image. |
Or skip the browser setup
If you need a screenshot of the finished page to check how its hero renders, ScreenshotNeo can return an image from one GET request. The HTML and CSS above are still the way to implement the hero; this API is for capturing the rendered page. Before capture, it accepts the cookie or consent banner like a visitor and removes more than 60 known consent platforms, newsletter popups, and chat widgets; each of those steps can be turned off. Bot checks or CAPTCHAs, blank pages, timeouts, failed loads, and cache hits are not billed, and the response says which outcome occurred in X-Page-Verdict and X-Billed headers. ScreenshotNeo also offers an MCP server for AI agents, with take_screenshot, get_page_info, and capture_pdf tools.
Recommended Free Tools
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpReplace YOUR_API_KEY with your key and change the target URL to your page. See the ScreenshotNeo API documentation for request options. ScreenshotNeo has a free plan with 1,000 shots per month and no card required; paid plans start at $5 for 3,000 shots. Sign up for free and get 1,000 screenshots a month with no card.
Frequently Asked Questions
Can I put a button over a hero image?
Yes. Place a real HTML link or button inside the hero content container and position that container above the image with CSS.
Does a CSS background image need alt text?
CSS background images do not have an alt-text attribute. Use a content image element with suitable alt text if the image conveys information.
Should every hero image have high fetch priority?
No. Reserve high fetch priority for the image that is genuinely critical to the initial view; prioritizing resources indiscriminately can affect others.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
