Both display an image; they differ in almost everything else that matters.
The Decision Rule
- Content → img element. If the image conveys information the user needs — a product photo, a chart, an article illustration, a logo that identifies the site — it belongs in the markup.
- Decoration → CSS background. If removing it would lose nothing but visual polish — a texture, a gradient overlay, a repeating pattern, a hero backdrop behind text — CSS is the right home.
Almost every argument below follows from this.
Why img Wins for Content
- Accessibility: img takes alt text. A CSS background is invisible to screen readers unless you add ARIA workarounds, which are easy to get wrong.
- SEO: images in markup are eligible for image search indexing; CSS backgrounds generally are not.
- Performance: the browser's preload scanner finds img sources in the raw HTML immediately. A CSS background is discovered only after the stylesheet is downloaded and parsed, and only if the element matches — which is why hero images in CSS hurt LCP.
- Responsiveness: img supports srcset and sizes natively, letting the browser pick the right file. CSS needs image-set or media queries to approximate this.
- Native lazy-loading and priority hints work on img and not on CSS backgrounds.
- Right-click, save, share behave as users expect.
Why CSS Backgrounds Are Still Useful
- Effortless cropping and positioning with background-size and background-position, including cover behaviour without extra markup. (Though object-fit now gives img the same power.)
- Repeating patterns and tiles, which img cannot do.
- Multiple layered backgrounds and gradients on one element.
- Easy swapping by breakpoint or theme through CSS alone, including dark-mode variants.
- Text over image without positioning gymnastics.
The Middle Ground
Modern CSS narrows the gap in both directions:
- object-fit: cover on an img reproduces the classic background-cover behaviour while keeping all the img benefits. This is now the recommended pattern for hero images with text overlaid.
- image-set() brings resolution switching to CSS backgrounds.
- For a hero, the strongest pattern is an img with object-fit and fetchpriority high, positioned behind absolutely-placed text.
Quick Checks
- Would a blind user miss information if this image were gone? → img with alt.
- Would the page still make sense with the image removed entirely? → CSS.
- Is it the largest element on screen? → img, in the HTML, eagerly loaded and prioritized.
- Does it repeat or need layering? → CSS.
A decorative image in an img tag needs an empty alt attribute so screen readers skip it — that's the small extra rule that keeps the content/decoration distinction honest.