Choose a homepage background image that reinforces the page’s purpose, leaves a reliable area for readable heading and call-to-action text, survives desktop and mobile cropping, and has permission for every visible element. Use a CSS background when the image is atmosphere only. If visitors need the image to understand the offer, put it in the document as meaningful content with appropriate alternative text.
1. Decide what job the image performs
Start with the image’s role, not its color or trendiness. Write one sentence describing what a visitor should understand from the homepage before selecting candidates.
Decorative atmosphere
A background that supplies mood, texture, or brand tone but adds no information can be implemented with CSS. Screen readers do not announce CSS backgrounds, which is appropriate when omitting the image does not remove meaning. Keep the heading, body copy, and call to action in normal HTML so they remain discoverable and usable.
Informative content
If the image explains the product, shows the result a visitor is being promised, or contains information not present in text, it is content rather than decoration. Represent it with an HTML <img> (or another semantic image treatment) and write alternative text that conveys the relevant meaning. MDN documents the behavior and limitations of background-image; web.dev also distinguishes decorative and informative images.
Windows Errors? Fix Them Before They Spread
Repair common Windows errors and clear accumulated junk for a smoother, more stable PC - no reinstall needed.Free scan · no reinstallOutdated 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 match#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
Do not place essential words inside the photograph. Text baked into an image cannot reflow, translate, or be reliably read by assistive technology. Repeat any essential message in live HTML.
2. Build a shortlist around the homepage message
Collect several candidates with different compositions rather than several nearly identical colors. For each, record the subject, likely focal point, available negative space, orientation, and rights information.
Message fit
Ask whether the scene supports the promise made by the headline. A close-up of a person using a tool may support a workflow product; a generic skyline may only provide atmosphere. Avoid images that imply capabilities, locations, customers, or results your service does not actually provide.
Text-safe composition
Mark where the heading and button will sit. A relatively quiet area gives text a stable background, but “quiet” must be judged at the real crop and brightness. A busy subject behind a short headline can create visual noise even when average colors look acceptable.
Recommended Free Tools
Focal-point resilience
Identify faces, products, screens, and other details that must remain visible. Candidates whose important subject sits at an extreme edge are more likely to lose it when the viewport changes. Keep a second candidate if the design depends on a crop that only works at one width.
| Criterion | Question to ask | Reject when |
|---|---|---|
| Message fit | Does the scene clarify the offer? | It suggests a benefit the page cannot substantiate. |
| Copy space | Is there calm space at the planned text position? | Faces, edges, or high-detail patterns compete with the copy. |
| Crop resilience | Does the focal subject survive wide and narrow crops? | The subject disappears or becomes misleading on mobile. |
| Accessibility role | Can the image be decorative without losing meaning? | The visual carries information absent from the HTML. |
| Delivery needs | Can you provide suitable sizes and formats? | The only file is unnecessarily large or cannot be optimized. |
| Rights risk | Are the license and depicted rights understood? | People, logos, artwork, or trademarks have unresolved permissions. |
3. Test contrast where the words actually appear
Contrast is a property of the text against the pixels behind it, not against the image’s average color. A photograph can switch from bright to dark under one sentence, making part of the line unreadable.
Use the WCAG thresholds
WCAG 2.1 Success Criterion 1.4.3 requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. See the W3C explanation of Contrast (Minimum). Treat those as minimums, not a reason to accept a visually fragile design.
Stabilize the text layer
Preview the exact heading, supporting text, and button over the image at their real sizes. Then test the lightest and darkest portions under every line. If any portion fails, use one of these fixes:
Quick wins for a faster PC:
Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Repair Windows errors before they cause bigger problemsFix Now →Rank #2
- Add a translucent overlay or gradient behind the copy.
- Put the copy in a solid or mostly opaque panel.
- Move the copy to the image’s quieter side.
- Change the crop or choose another image.
- Change text color only when the resulting contrast remains compliant and the brand still reads correctly.
A gradient should follow the copy area, not merely darken the entire photograph. Recheck links, button labels, captions, and focus indicators independently.
4. Check desktop, tablet, and mobile composition
Responsive design changes both the viewport and the crop. W3C’s accessibility guidance recommends designing for differing viewport sizes, while web.dev’s responsive-images guidance explains selecting suitable image candidates and density variants.
Preview the real breakpoints
- Open the homepage at the widest desktop layout you support.
- Resize through tablet widths and note when the focal subject approaches the copy.
- Check a narrow phone width in portrait orientation.
- Rotate to landscape and test browser zoom or larger text.
- Repeat with the actual navigation state, headline wrapping, and button dimensions.
Do not judge a background only from a full, uncropped file. background-size: cover intentionally removes portions of the image, and the removed portions differ by aspect ratio.
Choose a focal-position strategy
For a CSS background, set background-position to keep the subject visible, then verify that the chosen position does not push text into a busy area. If one position cannot work at all widths, use media queries with different positions or a mobile-specific asset. For an informative image, use responsive sources and a crop that preserves its meaning; do not let an art-directed crop remove the detail described by the alt text.
The Tool Desk
Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →Account for density and loading
Provide image candidates appropriate to the rendered dimensions and device density instead of sending the largest source to every visitor. Compress and encode the selected candidates in formats your browser support policy permits, while retaining enough quality for the focal subject. Avoid lazy-loading the above-the-fold image if it delays the first meaningful view; prioritize it according to your performance budget and test on a constrained connection.
5. Implement the image according to its role
Decorative CSS background
Keep the content in HTML and layer the image behind it:
.hero {
background-image:
linear-gradient(90deg, rgba(0,0,0,.68), rgba(0,0,0,.12)),
url("/images/home-hero-1600.webp");
background-size: cover;
background-position: center;
color: #fff;
}
@media (max-width: 700px) {
.hero { background-position: 65% center; }
}The overlay is part of the contrast solution, not a substitute for testing. If the image fails to load, the HTML heading and action should still communicate the page’s purpose.
Informative HTML image
<figure class="hero-figure">
<img
src="/images/product-800.webp"
srcset="/images/product-800.webp 800w,
/images/product-1600.webp 1600w"
sizes="100vw"
alt="The dashboard showing a scheduled report ready to send">
</figure>Use a concise alt description that conveys the image’s function in context. If the adjacent text already supplies all the same information and the image is only visual support, use alt=""; web.dev recommends an empty alt for decorative HTML images rather than omitting the attribute.
6. Verify rights beyond the download button
Read the license attached to the exact file and retain a record of its terms and download date. Copyright permission for a photograph does not automatically clear every recognizable person, logo, trademark, artwork, or other depicted material. The Unsplash Help Center explains logo and brand issues; obtain additional permission when the intended use requires it.
Unsplash’s standard license currently describes commercial and non-commercial use without attribution, while restricting resale without significant modification and compiling images into a similar or competing service. Those terms are specific to Unsplash and can change, so recheck the live license. Other libraries have different rules.
Make a rights checklist
- Save the provider name, asset URL, license version or page, and download date.
- Identify recognizable people and check model-release or publicity-right requirements for your use.
- Inspect visible brands, logos, artwork, screens, and property for separate permissions.
- Confirm that edits, advertising, resale, and redistribution are allowed for your context.
- Record any attribution or notice the license requires.
7. A repeatable selection and review workflow
- Write the message. State what the visitor must understand without relying on the picture.
- Classify the role. Mark the image decorative or informative and choose CSS or semantic markup accordingly.
- Shortlist candidates. Compare message fit, text-safe composition, focal-point resilience, delivery needs, and rights risk.
- Place real content. Use the production heading, paragraph, button, navigation, and overlay.
- Measure contrast. Check every text region against the actual pixels at 4.5:1 for normal text or 3:1 for large text.
- Exercise responsive crops. Test wide, narrow, portrait, landscape, zoom, and larger text.
- Test loading and fallback. Confirm that a slow or failed image still leaves an understandable page and usable controls.
- Document rights. Store license evidence and any model, trademark, or artwork permissions with the asset.
- Capture review images. Compare the same page at agreed viewport sizes so design and accessibility reviewers see identical crops.
8. Capture repeatable screenshots for review
You can use browser developer tools for a quick check: open responsive design mode, set the target viewport, reload, and save a screenshot at each breakpoint. For repeatable or automated review, an API avoids manual resizing. ScreenshotNeo is a website screenshot API and MCP server; it accepts consent banners before capture, removes more than 60 known consent platforms plus newsletter popups and chat widgets, and bills only clean shots. Its response identifies the page verdict and billing status with X-Page-Verdict and X-Billed headers.
Or skip the browser setup
One GET request captures a URL as PNG, JPEG, WebP, or PDF. The API supports full-page and element captures, device presets or custom viewports, retina scale, dark mode, custom CSS and JavaScript, clicks, wait conditions, blocked resources, headers, cookies, user agents, authorization, timezone and geolocation, transparent backgrounds, resizing, chosen cache TTLs, signed links, asynchronous webhooks, bulk capture of up to 100 URLs per call, usage reporting, and an OpenAPI specification. Existing parameter names used by other screenshot APIs also work.
cURL:
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}`);See the ScreenshotNeo documentation for option names and response handling. Bot checks or CAPTCHAs, blank pages, timeouts, failed loads, and cache hits are not billed. An MCP server provides take_screenshot, get_page_info, and capture_pdf tools for Claude, Cursor, and other MCP clients. The Free plan includes 1,000 screenshots per month with no card; paid plans start at $5 for 3,000. Create a free ScreenshotNeo account to capture your responsive image reviews.
9. Troubleshooting common failures
The heading is unreadable only in part of the image
The photograph changes luminance behind the line. Add a local gradient or panel, move the copy, or select a quieter crop, then measure the worst portion again.
The subject vanishes on phones
The cover crop is removing it. Change the mobile focal position, supply an art-directed mobile asset, or choose a composition with more central negative space.
The page communicates less with images disabled
You treated an informative visual as decoration. Move it into semantic HTML, add useful alt text, and retain the same visible explanation in nearby copy.
Do these 3 things before closing this tab:
1Clear out junk files and repair common Windows errors2Scan for outdated or missing drivers - takes under a minute3Repair Windows errors before they cause bigger problemsA background looks sharp on desktop but soft on a high-density phone
The delivered candidate is too small for the rendered density. Add an appropriately sized source and verify that your responsive selection chooses it without sending the largest file to everyone.
Rank #4
A licensed image still raises a legal concern
Check depicted people, logos, trademarks, artwork, and property separately. Ask the rights holder or replace the asset when the intended use is not clearly covered.
Automated captures show a popup or a blank page
Verify the target URL, wait condition, and required authentication. With ScreenshotNeo, inspect X-Page-Verdict and X-Billed; failed loads, blank pages, bot checks, timeouts, and cache hits are identified and not billed.
10. Final decision checklist
- The image supports the homepage message without making an unsupported promise.
- You have explicitly classified it as decorative or informative.
- Every text region meets 4.5:1 (normal) or 3:1 (large) against its real background.
- The focal subject and copy remain clear at all tested viewport sizes and crops.
- Responsive candidates, fallback behavior, and loading priority are appropriate.
- Alt text is meaningful for informative images and empty for purely decorative HTML images.
- The exact license and separate depicted-rights questions are documented.
- Review screenshots use consistent viewport settings and represent the production page.
Frequently asked questions
Should a homepage hero always use a photograph?
No. A gradient, illustration, texture, or plain color can communicate the message more clearly and may make contrast and responsive cropping easier. Choose the medium that best serves the page’s purpose.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Can I put an important product screenshot in a CSS background?
Not if visitors need that screenshot to understand the offer. Use semantic image content and an alternative text description, while keeping decorative atmosphere in CSS.
Is a larger source file automatically better for a hero?
No. The source must be large enough for the rendered dimensions and device density, but oversized files increase transfer work. Provide appropriate responsive candidates and evaluate quality at the real crop.
Frequently Asked Questions
Should a homepage hero always use a photograph?
No. A gradient, illustration, texture, or plain color may communicate the message more clearly and simplify contrast and responsive cropping.
Can I put an important product screenshot in a CSS background?
Not if visitors need it to understand the offer. Use semantic image content with suitable alternative text.
Is a larger source file automatically better for a hero?
No. Match candidates to rendered dimensions and device density; oversized files add transfer cost without guaranteeing a better result.
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.
