How to Choose a Background Image for a Website Homepage

Choose the image that supports the homepage’s purpose, leaves a reliable area for readable text, survives desktop and mobile crops, and has cleared usage rights. Start by deciding whether the image is decorative atmosphere or information visitors need. Use a CSS background for decoration. If the visual communicates the offer or message, include it as meaningful image content with suitable alternative text.

Evaluate each candidate against six tests: message fit, text-safe composition, contrast, crop resilience, loading needs, and licensing or depicted-rights risk. Validate the real design at representative viewport widths before publishing.

1. Decide what role the image plays

Decorative atmosphere

A background can add mood, depth, or brand texture without carrying information. CSS backgrounds are appropriate for this role. Screen readers do not announce CSS background images, so do not put essential meaning in one.

Informative content

If a person needs the image to understand the product, place, person, or offer, represent it semantically in the document. Use an informative <img> with alternative text that conveys the relevant meaning. See MDN’s background-image reference and web.dev’s responsive image guidance.

A practical decision checklist

• Would the page still communicate its promise if the image failed to load?
• Does the image explain something, or only establish atmosphere?
• Does the foreground copy identify the offer without relying on visual details?
• Could a screen-reader user miss information because it exists only in the background?

2. Match the image to the homepage message

Write the homepage’s primary promise in one sentence, then choose an image that reinforces that promise without competing with it. A project-management homepage might use a calm collaborative scene; a travel site might use a destination view; a technical service may benefit from an abstract, quiet texture. These are starting points, not universal styles.

Question	What to check
Message fit	Does the subject support the headline and audience?
Emotion	Does the lighting and color reinforce the intended feeling?
Specificity	Is the image concrete enough to be meaningful but broad enough for your market?
Distraction	Do faces, bright highlights, signs, or patterns pull attention from the CTA?
Authenticity	Does it represent the real product or customer context honestly?

Reject images that look attractive in isolation but create a mismatch with the copy. A visually impressive image can still weaken comprehension when its subject suggests a different product or audience.

3. Create a text-safe composition

Place the heading, supporting copy, and call to action over the actual image rather than judging a thumbnail. Look for a relatively quiet region with consistent tone behind the text. Empty sky, a soft wall, a darkened side of a scene, or controlled blur can provide more reliable text space than a busy center.

Use an overlay when the image varies

.hero {
  position: relative;
  isolation: isolate;
  color: #fff;
  background: url("/images/hero.webp") center / cover no-repeat;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(0,0,0,.72), rgba(0,0,0,.28));
}

.hero__content {
  max-width: 42rem;
  padding: clamp(3rem, 10vw, 8rem) 1.25rem;
}

Measure contrast where each line of text sits. WCAG 2.1 Success Criterion 1.4.3 specifies a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text. The ratio must hold against the background behind the text, not an unrelated average color. Read the W3C contrast guidance.

Prefer a text panel when an overlay is not enough

.hero__content {
  max-width: 38rem;
  padding: 2rem;
  background: rgb(0 0 0 / 72%);
  border-radius: .75rem;
}

A solid or translucent panel is often more dependable than progressively darkening a photo. Check focus indicators, links, buttons, and any small supporting text separately.

4. Test desktop and mobile crops

CSS background-size: cover fills the box by cropping whichever dimension does not match the image ratio. A subject near the edge can disappear on a narrow screen. Test at least a wide desktop viewport, a tablet-like width, and a narrow phone width, plus portrait and landscape orientations when relevant.

Choose a focal point deliberately

.hero {
  background-position: 70% center;
}

@media (max-width:  fortyrem) {
  .hero {
    background-position: 62% center;
  }
}

Replace the illustrative breakpoint with the values used by your design system. If one focal point cannot preserve the composition, provide a mobile-specific crop or image.

Use semantic responsive images for informative visuals

<picture>
  <source media="(max-width: 40rem)" srcset="/images/hero-mobile.webp">
  <source srcset="/images/hero-wide.webp">
  <img src="/images/hero-wide.webp"
       alt="A designer reviewing a homepage layout with a client"
       width="1600" height="900">
</picture>

For a purely decorative HTML image, use alt="". Do not omit the alt attribute. Provide appropriately sized candidates where your implementation supports them, as described by web.dev.

5. Pick format, dimensions, and loading behavior

• Export a compressed format supported by your target browsers, such as WebP or JPEG for photographs.
• Use a crop that matches the hero’s displayed ratio so the browser does less work and fewer important pixels are discarded.
• Serve a smaller candidate to narrow screens when the composition or display size allows it.
• Do not lazy-load the image that forms the initial hero if doing so delays the largest visible content; prioritize it according to your performance strategy.
• Keep text out of the bitmap. HTML text remains selectable, translatable, accessible, and responsive.
• Set intrinsic dimensions for semantic images to reduce layout shift.

There is no single correct homepage dimension or file size established by the research. Measure your own page on representative devices and networks, then adjust the candidates and compression.

6. Verify accessibility before launch

1. Identify whether the image is decorative or informative.
2. For informative images, write alternative text that conveys the relevant purpose rather than describing every detail.
3. Check normal text at 4.5:1 contrast and large text at 3:1 or better.
4. Tab through links and buttons over the image; verify visible focus styles.
5. Zoom text and test narrow widths. The copy must remain readable when the crop changes.
6. Check the page with a screen reader or accessibility inspector to confirm that essential information is available without the background.

See W3C’s web accessibility tips for responsive and accessible design considerations.

7. Confirm licensing and depicted rights

Read the license for the exact file and intended use. A stock-photo license may not clear every visible person, trademark, logo, artwork, or other third-party right. Obtain additional permissions when the use and local law require them.

For example, Unsplash’s standard license permits commercial and non-commercial use without attribution but includes restrictions such as resale without significant modification. Its help guidance on logos and brands explains that copyright permission does not automatically grant rights to recognizable people, trademarks, logos, or depicted copyrighted material. Recheck live terms before publication; another provider’s license may differ.

8. Compare candidate images systematically

Criterion	Pass condition	Warning sign
Message fit	Supports the headline and audience	Suggests a different product or promise
Text-safe area	Copy has calm, consistent space	Faces, edges, or highlights cross the text
Contrast	Measured ratio meets WCAG thresholds	Readable only at one crop or brightness
Crop resilience	Subject and copy survive tested widths	Important content disappears on mobile
Load strategy	Appropriate candidates and priority are defined	One oversized file serves every viewport
Rights	License and depicted rights are documented	Unclear people, logos, artwork, or restrictions

Score each candidate against the same criteria. Choose the image with the strongest total result, not simply the most attractive original thumbnail.

9. Capture and review the finished homepage

Review screenshots of the rendered page at the viewport sizes your visitors use. Check the hero with real copy, overlays, consent states, and responsive crops. A browser automation script can capture a page after styles and images settle:

import { chromium } from 'playwright';

const browser = await chromium.launch();
const page = await browser.newPage({ viewport: { width: 1440, height: 900 }, deviceScaleFactor: 1 });
await page.goto('https://example.com', { waitUntil: 'networkidle' });
await page.screenshot({ path: 'homepage-wide.png', fullPage: true });
await page.setViewportSize({ width: 390, height: 844 });
await page.screenshot({ path: 'homepage-mobile.png', fullPage: true });
await browser.close();

Repeat for a tablet width and any authenticated or localized states that change the hero. Review contrast at the exact crop delivered to users.

10. Or skip the browser setup

ScreenshotNeo captures a URL with one GET request and returns PNG, JPEG, WebP, or PDF. Its capture options include full-page shots with lazy images loaded, element capture by CSS selector, custom CSS and JavaScript, device presets or any viewport, retina scale, dark mode, waits for selectors, delays or network idle, and blocking for ads, trackers, requests, or resource types. The ScreenshotNeo API documentation lists the parameters.

cURL

curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://example.com -o homepage.webp

Python

import requests

r = requests.get("https://api.screenshotneo.com/v1/shot", params={"access_key": "YOUR_API_KEY", "url": "https://example.com"}, timeout=90)
r.raise_for_status()
open("homepage.webp", "wb").write(r.content)

Node.js

const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://example.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);
if (!res.ok) throw new Error(`Screenshot failed: ${res.status}`);
const fs = await import('node:fs/promises');
await fs.writeFile('homepage.webp', Buffer.from(await res.arrayBuffer()));

Cookie banners, newsletter popups, and chat widgets are removed before the shot. Bot checks, blank pages, failed loads, timeouts, and cache hits are never billed, and response headers report the page verdict and whether the request was billed. An MCP server provides take_screenshot, get_page_info, and capture_pdf tools for Claude, Cursor, and other MCP clients. One thousand screenshots a month are free with no card; paid plans start at $5 for 3,000 shots. Create a free ScreenshotNeo account.

11. Troubleshooting

Text is readable on desktop but not mobile

Cause: cover changed the crop or a bright region moved behind the copy. Fix: adjust background-position, add a mobile crop, strengthen the overlay, or use a text panel; then remeasure contrast.

The image looks blurred or pixelated

Cause: the source is too small for the rendered area or the browser selected an undersized candidate. Fix: provide an appropriately sized source and verify the srcset or background asset selected at each density.

The hero causes layout shift

Cause: an informative image has no intrinsic dimensions or its container height is unknown. Fix: set width and height on <img>, use a fixed or aspect-ratio container, and reserve the hero’s space.

The image communicates information to screen-reader users

Cause: essential meaning exists only in a CSS background. Fix: move the visual into semantic markup and write concise alternative text; keep decorative backgrounds in CSS.

A ScreenshotNeo response is not the expected image

Cause: the page may still be loading, may show a bot check, or may require interaction. Fix: use a selector wait, delay, network-idle wait, custom headers or cookies, click an element before capture, or inspect the X-Page-Verdict and X-Billed headers. Failed loads and bot checks are not billed.

The license appears to cover the photo but a logo or person is visible

Cause: copyright permission and depicted-person, trademark, publicity, or artwork rights are separate questions. Fix: remove or replace the image, obtain the needed permissions, or document a defensible legal basis for the intended use.

12. Performance, reliability, and cost notes

• Use a deliberate crop and responsive candidates so mobile devices do not download an unnecessarily large desktop image.
• Keep overlays and text in CSS and HTML to preserve accessibility and make copy changes cheap.
• Test cache behavior and stale assets after replacing a hero file; version filenames or cache keys when your deployment requires immediate changes.
• For repeated visual reviews, ScreenshotNeo supports caching with a TTL you choose, bulk capture of up to 100 URLs per call, asynchronous jobs with signed webhooks, and signed links for public <img> tags.
• Its usage API and response billing headers help reconcile capture volume. Only clean shots are billed; cache hits and failed or unusable captures cost nothing.
• ScreenshotNeo plans include every feature: Free offers 1,000 shots per month, Starter is $5 for 3,000, Growth $15 for 15,000, Pro $39 for 60,000, Scale $99 for 250,000, and Business $249 for 1,000,000. Yearly billing gives two months free.

FAQ

Should every homepage hero use a background image?

No. Use one when it supports the message or atmosphere and remains readable. A plain color, gradient, or illustration may communicate more clearly.

Is a darker image always more accessible?

No. Measure the actual text-to-background contrast. A dark overlay, text panel, different crop, or different image may be more reliable.

Can I put important words inside the image file?

Avoid it for homepage copy. HTML text adapts to viewport size, translation, zoom, and assistive technology more reliably.

What should the alternative text say?

State the image’s relevant purpose or information in context. If it is purely decorative, use an empty alt attribute.

How many image candidates should I create?

Create the candidates your tested layouts need. The research does not establish a universal number; choose based on crop differences, viewport widths, and device density.

Does an image-library license settle all legal questions?

No. Review the provider’s current terms and check recognizable people, trademarks, logos, artwork, and other depicted rights separately.