What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Use a CSS background image when it is decorative and the page remains readable, usable, and quick to load without it. If people need to understand the image itself—a product, person, chart, or scene—put it in the page as an HTML image with an appropriate text alternative. A plain color or gradient may be the better choice when it provides enough visual structure without competing with the content.
Choose based on what the image means
The key question is whether the image adds atmosphere or carries information. CSS background images are not announced to screen readers as meaningful image content. They suit decorative imagery and visual formatting, but should not be the only place a page communicates a fact, label, status, instruction, or control.
As an Amazon Associate I earn from qualifying purchases.
Use a CSS background for decoration
A background can work well behind a hero section or other layout area when the image supports the design but is not needed to understand the page. W3C Technique C9 describes CSS as one way to include purely decorative images; it is an informative example, not a mandatory implementation method. The technique is not appropriate for images that convey information or functionality, or are primarily intended to create a specific sensory experience. W3C Technique C9
Use an HTML image for content
If readers need to inspect the picture itself, use semantic image markup and provide a meaningful text alternative. If an image is decorative but must be included as an HTML image, use empty alternative text. Keep essential words and controls as real HTML content rather than baking them into an image. MDN notes that browsers do not expose CSS background images as special information to assistive technology. MDN: background-image
#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
Choose a plain color or gradient when it does the job
If a photograph adds little context and makes text harder to read, use a color or gradient instead. There is no universal evidence that background photos improve engagement or conversions; the benefit depends on the page, image, and audience.
Make text readable over the image
Text on a photograph must remain legible where it actually appears, including over both light and dark parts of the image. WCAG AA contrast thresholds are at least 4.5:1 for ordinary text and 3:1 for large text. MDN defines large text as at least 18pt, or 14pt bold; its pixel equivalents are 24px or bold 18.66px. MDN: Understanding Success Criterion 1.4.3, Contrast (Minimum)
Rank #2
Measure or otherwise verify contrast at the text locations, not just against an average image color. An opaque or semi-opaque panel, gradient overlay, or different text placement can help, but check the resulting contrast rather than assuming an overlay is sufficient. Also check that links, buttons, and keyboard focus indicators remain visible against a busy background.
CSS backgrounds cannot have text alternatives associated with them, and information placed in a background may be lost for people using alternate backgrounds or high-contrast display settings. Do not put essential instructions, labels, or status information only in the background. W3C Failure F3
Check the crop and text at different sizes
A background that fills a section can crop differently as the viewport changes. Test the smallest supported screen, a wide screen, and enlarged text. Make sure the subject stays visible and that text does not land on a visually complicated area. If the subject matters, adjust its focal position or use a different crop or source for smaller screens.
When the image itself is content, responsive HTML image techniques can let the browser choose an appropriate resource and reserve layout space. CSS backgrounds are not present in the initial HTML as ordinary image markup, which can affect how browsers discover them and how preload strategies work. web.dev: Optimize Largest Contentful Paint
Rank #4
Keep the page usable if the image does not load
Specify a background color that works with the foreground text. The color can show through if the image fails to load, for example because of a network problem; the text must still be legible against it. MDN: background-image
Consider the image’s size, responsiveness, and loading priority, especially for a prominent hero. web.dev advises that important images can be prioritized, but prioritizing one resource can push another down, and excessive preloading can hurt performance. Do not add preload or high-priority hints by default; reserve them for genuinely important images and verify the page’s behavior. web.dev: Optimize Largest Contentful Paint
Quick Recap
Run these checks before publishing
- Confirm the role: If the image communicates information or is itself content, use an HTML image with a suitable text alternative. Otherwise, a CSS background may be appropriate for decoration.
- Check contrast: Verify text against the actual image areas beneath it, using 4.5:1 for ordinary text and 3:1 for large text as WCAG AA baselines.
- Inspect responsive views: Test mobile and wide layouts, enlarged text, and any important subject placement.
- Test the fallback: Set a background color and confirm that text and controls remain visible if the image or CSS is unavailable.
- Review delivery: Optimize the image and decide whether it should be a responsive HTML image instead. Prioritize loading only when the image is genuinely important.
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.
