Some links on this page are affiliate links: if you buy through them we may earn a commission, at no extra cost to you.
A strong website banner (or hero) answers two questions immediately: what is this page about, and what should I do next? Use one focused message, real HTML text, a purposeful image, and a layout that reflows cleanly from desktop to narrow screens and zoomed views. The practical workflow below covers content, responsive CSS, accessibility, image performance, testing, and an API option for capturing the finished result.
1. Start with one message and one next step
The NSW Design System describes heroes as layouts that communicate a focused message. Treat that as a useful design constraint: the banner introduces the page; it is not a billboard for every benefit, promotion, and navigation link.
Write a compact content hierarchy
- Heading: one clear H1 stating the page’s subject or outcome.
- Supporting text: one or two short sentences that add context or a qualification.
- Primary action: one prominent button or link when the visitor has a meaningful next task.
- Secondary action: include only when it serves a different, common intent (for example, “View documentation” beside “Start free”).
Keep decorative badges, partner logos, and promotional details subordinate to that hierarchy. On a content page, the hero should not replace the page’s title structure; retain a logical heading hierarchy in the document.
Free tools Windows power users keep installed
One-click scans. No signup required.
Choose a pattern that matches the page
| Pattern | Use it when | Main risk |
|---|---|---|
| Text-only hero | The message and action matter more than imagery, or the image adds no information. | A sparse layout can feel unfinished without deliberate spacing and typography. |
| Text plus supporting image | The image supplies useful context, product evidence, or mood without carrying essential words. | Cropping can hide the subject or reduce text contrast. |
| Task-oriented search/filter hero | A listing, catalog, or directory page’s first task is searching or filtering. | Too many controls can bury the page purpose, especially on mobile. |
These are contextual choices, not a universal ranking. Sketch the message and action first, then select the visual treatment that supports them.
2. Keep meaningful words in HTML, not in the image
Put headings, explanatory copy, and calls to action in real text. HTML text can wrap, resize, translate, receive focus, and be exposed to assistive technology. WAI’s Images Tutorial advises avoiding text in images except where it is part of a logo or another justified exception.
If a supplied graphic contains words that cannot be removed, reproduce those words in the appropriate text alternative or nearby HTML. Do not rely on a background image for the only copy. A CSS background is suitable for decoration; an informative image is usually better represented by an HTML <img> with an intentional alternative.
#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
3. Build a responsive structure that can stack
Use a two-column layout only while both columns have room. At a narrow width, let the text and image stack or rearrange while preserving a sensible reading and keyboard order.
Outdated Drivers Are Slowing You Down
One free scan finds every outdated or missing driver and matches the right update for your exact hardware.Free scan · exact hardware matchPC Slower Than It Used to Be?
A free scan shows the junk files, broken settings and background clutter dragging Windows down - then fixes them in one click.Free scan · Windows 10 & 11<section class="hero" aria-labelledby="hero-title">
<div class="hero__copy">
<p class="eyebrow">Team workspace</p>
<h1 id="hero-title">Plan projects without the busywork</h1>
<p>Bring tasks, owners, and deadlines into one view.</p>
<a class="button" href="/start">Start free</a>
</div>
<img class="hero__image"
src="/images/workspace-1280.webp"
srcset="/images/workspace-640.webp 640w,
/images/workspace-1280.webp 1280w,
/images/workspace-1920.webp 1920w"
sizes="(max-width: 48rem) 100vw, 50vw"
width="1920" height="1200"
alt="Project tasks arranged on a team workspace" />
</section>.hero {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: clamp(1.5rem, 5vw, 5rem);
align-items: center;
max-width: 72rem;
margin-inline: auto;
padding: clamp(2rem, 7vw, 6rem) 1rem;
}
.hero__copy { max-inline-size: 38rem; }
.hero h1 { font-size: clamp(2rem, 5vw, 4.5rem); line-height: 1.05; }
.hero__image { display: block; inline-size: 100%; block-size: auto; }
@media (max-width: 48rem) {
.hero { grid-template-columns: 1fr; }
.hero__image { order: 2; }
}
minmax(0, 1fr) prevents long words or intrinsic image widths from forcing horizontal overflow. The mobile rule deliberately changes the visual order; because the image follows the copy in the DOM, keyboard and screen-reader users encounter the message and action first.
Account for zoom and reflow
WCAG’s Reflow guidance describes applicable horizontal-language content fitting a width equivalent to 320 CSS pixels without loss of information or functionality. Test at that effective width and at enlarged browser zoom. Let headings wrap, avoid fixed-height text containers, and do not require two-dimensional scrolling to read ordinary content. If a visual rearrangement changes the order, verify that focus order still makes sense.
4. Make text readable over photographs and gradients
Check the actual pixels behind every line of text, not just an average color sampled from the image. A dark overlay, a localized gradient, or a solid panel can stabilize contrast while preserving the photograph.
.hero--photo {
position: relative;
color: white;
background: url("/images/hero.webp") center / cover no-repeat;
isolation: isolate;
}
.hero--photo::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: linear-gradient(90deg, rgba(0,0,0,.72), rgba(0,0,0,.18));
}
Review text, links, and buttons against the image and gradient in their real states, including hover, focus, and disabled states. Do not use color as the only carrier of meaning; pair it with text, an icon with an accessible name, or another visible cue. Consult the applicable WCAG criterion and your chosen conformance target before assigning a numeric contrast requirement—the guidance used here points to WCAG but does not state a threshold.
Rank #2
5. Choose the right alternative text
Alternative text depends on the image’s purpose, not how visually detailed it is.
- Informative image: describe the essential information the image contributes. “Project tasks arranged on a team workspace” is more useful than “hero image.”
- Decorative image: use an empty alternative (
alt="") so assistive technology does not announce redundant content. - Image that is a link or button: describe the destination or action, such as “View pricing,” rather than the scene depicted.
Do not repeat a nearby heading word for word unless the image itself adds that information. If the visual contains essential wording, make the same wording available in HTML or the text alternative.
6. Treat the hero image as a performance-critical asset
Reserve space and avoid late layout shifts
Set accurate width and height attributes (or an equivalent aspect-ratio rule). The browser can reserve the image’s space before the file arrives, reducing content movement.
Do not lazy-load an above-the-fold hero
web.dev advises against lazy-loading an image that is visible at the initial viewport. Lazy loading is appropriate for images below the fold when it defers work without delaying content the visitor needs immediately.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Serve candidates sized for the viewport
Use srcset with sizes when a single large source would waste data on small screens. The sizes value should describe the image’s rendered width, not the source file’s intrinsic width. Use fetchpriority="high" sparingly and only when this image is genuinely vital to the initial experience; prioritizing too many resources competes with CSS, fonts, and other critical requests.
Compress and crop the source to the design’s real aspect ratio, provide modern formats where your delivery stack supports them, and measure on the actual site rather than promising a specific speed gain.
7. Handle motion, carousels, and interaction
A rotating banner adds complexity rather than automatically improving communication. If content starts moving or rotating automatically, provide a visible pause or stop control. Ensure each panel’s heading, links, and controls remain usable at narrow widths; do not let an overlaid arrow cover the call to action.
Prefer one stable hero when the additional slides do not answer distinct user needs. For any interactive control, use a real button or link, a visible focus style, an accessible name, and a target large enough to operate comfortably. Test with keyboard navigation before polishing animation.
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 →8. A practical design-review checklist
- Can a first-time visitor state the page’s subject after reading the H1?
- Is there one visually primary action, and does its destination match its label?
- Does the composition remain understandable at a 320 CSS-pixel-equivalent width and enlarged zoom?
- Can text wrap without clipping, overlap, or horizontal scrolling?
- Does the DOM order put the message and action before nonessential decoration?
- Is every image’s alternative appropriate to its purpose?
- Does the foreground remain readable over every part of the photograph or gradient?
- Are focus, hover, error, and disabled states distinguishable without color alone?
- Does the hero image have dimensions, an appropriate loading strategy, and responsive candidates?
- If there is motion, can users visibly pause it?
9. Capture and inspect the finished banner
Manual browser checks remain essential: resize the viewport, zoom the page, tab through controls, and test with a screen reader. For repeatable visual checks across URLs or breakpoints, a screenshot API can produce consistent artifacts for review.
Or skip the browser setup
ScreenshotNeo is a website screenshot API and MCP server. It removes cookie/consent banners, newsletter popups, and chat widgets before capture; only clean shots are billed, while bot checks or CAPTCHAs, blank pages, timeouts, failed loads, and cache hits are not billed. Responses identify the result with X-Page-Verdict and X-Billed headers. Its MCP tools—take_screenshot, get_page_info, and capture_pdf—let Claude, Cursor, or another MCP client inspect pages.
The API supports full-page and element captures, dark mode, device presets or custom viewports, retina scale, PDF output, custom CSS and JavaScript, clicks, selector or network-idle waits, request blocking, headers, cookies, user agents, authorization, timezone, geolocation, transparent backgrounds, resizing, configurable-TTL caching, signed links, asynchronous webhooks, bulk capture of up to 100 URLs per call, usage data, and an OpenAPI specification. Existing parameter names used by other screenshot APIs also work.
cURL (see the ScreenshotNeo documentation):
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpPython:
import requests
r = requests.get("https://api.screenshotneo.com/v1/shot", params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"}, timeout=90)
open("shot.webp", "wb").write(r.content)Node.js:
const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);
Replace the example URL with the page containing your banner. ScreenshotNeo’s Free plan includes 1,000 shots per month with no card; paid plans start at $5 for 3,000 shots. Create a free ScreenshotNeo account to begin.
The Tool Desk
Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →10. Troubleshoot common banner failures
Text is clipped on mobile
Remove fixed heights from the text container, check for overflow:hidden, and allow the heading and button to wrap. Inspect at the narrowest supported width and with zoom enabled.
Rank #4
The image pushes the page sideways
Check for missing min-width: 0 on grid or flex children, an intrinsic image wider than its container, or long unbroken text. Apply max-inline-size:100% and use minmax(0, 1fr).
Words disappear when the image crops
Move essential copy into HTML. If the subject is being cropped, change the focal position, use a different mobile crop, or switch to a contained image rather than relying on cover.
The hero appears to load late
Confirm it is not lazy-loaded, provide an accurate size, use an appropriately sized srcset candidate, and reserve high fetch priority for this one genuinely critical image.
Keyboard focus feels out of order
Compare DOM order with the visual order after the responsive breakpoint. Reorder elements in markup when possible instead of using aggressive CSS positioning; then tab through every control.
A screenshot contains consent UI or a blank page
For a DIY browser capture, wait for the page’s meaningful selector and handle the consent state before taking the shot. With ScreenshotNeo, consent banners, popups, and chat widgets are removed before capture, and blank or failed loads are identified as non-billable outcomes.
11. Make the decision in context
Compare candidate hero designs on four axes: clarity of message and action; crop and reflow behavior at narrow widths and zoom; the image’s purpose and alternative text; and image size and loading behavior. A text-only hero wins when imagery adds little. Text plus a supporting image works when the visual contributes context. A search or filter hero is appropriate when completing that task is the page’s primary job. The best banner is the one that preserves access to the same information and action across devices, zoom levels, input methods, and loading conditions.
Frequently Asked Questions
Should every homepage hero have a background image?
No. Use imagery only when it contributes context or emotion that supports the page’s focused message; otherwise a text-first layout is often clearer and lighter.
Can I put the H1 inside an image for exact visual control?
Avoid it. Keep the H1 as HTML so it can wrap, resize, translate, receive focus context, and remain available to assistive technology.
What should I test before publishing a responsive banner?
Test narrow width and zoom reflow, keyboard order and focus states, image alternatives, contrast over the real artwork, motion controls, and the hero’s loading behavior.
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.
