HTML img vs CSS background-image: When to Use Each

By the end of this page, you will be able to choose between <img> and background-image based on an image’s purpose. The central rule is simple: use <img> for meaningful page content and CSS backgrounds for decorative presentation.

An image can serve two very different roles on a web page:

• Content: The image communicates information the user needs, such as a product photo, chart, author portrait, article illustration, or company logo.
• Presentation: The image is visual decoration, such as a textured panel, hero-banner backdrop, gradient-like pattern, or nonessential flourish.

Use an HTML <img> element when the image is content. It is part of the document structure and supports an alt attribute, which gives the image an accessible text alternative.

<img src="product-blue.jpg" alt="Blue insulated water bottle">

Use CSS background-image when the image is presentation. CSS controls how an element looks, including whether a background repeats, is centered, covers the element, or appears behind text.

.hero {
  background-image: url("paper-texture.png");
  background-repeat: repeat;
}

This choice matters because HTML describes the meaning and structure of a page, while CSS describes its visual styling. A user of a screen reader can receive the alt text for an <img>, but a CSS background has no equivalent built-in alternative text.

Think of a web page as a printed magazine:

• An <img> is a photograph or diagram placed in the article because readers need its information. It should have a caption or description when appropriate.
• A CSS background image is the paper texture, colored header strip, or decorative border. It affects appearance but does not change the article’s meaning.

Ask one question: If this image disappeared, would the user lose important information?

• If yes, use <img>.
• If no, it is usually a CSS background.

HTML image syntax

<img
  src="team-photo.jpg"
  alt="Three customer-support team members at their desks"
  width="1200"
  height="800"
>

Important attributes:

• src: the image URL.
• alt: a text alternative for the image.
• width and height: help the browser reserve space before the file finishes loading, reducing layout shift.

For a purely decorative image that must remain in HTML, use an empty alternative text:

<img src="divider-leaf.svg" alt="">

An empty alt tells assistive technology that the image should be ignored. Do not omit alt for normal images.

CSS background syntax

.profile-card {
  min-height: 240px;
  background-image: url("abstract-shapes.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

This places a decorative image behind the card’s contents. cover fills the element, but some parts of the image may be cropped when the element’s shape differs from the image’s shape.

Responsive content image

<img> also supports responsive source selection:

<img
  src="mountain-800.jpg"
  srcset="mountain-400.jpg 400w,
          mountain-800.jpg 800w,
          mountain-1600.jpg 1600w"
  sizes="(max-width: 600px) 100vw, 600px"
  alt="Snow-covered mountain range at sunrise"
  width="1600"
  height="900"
>

The browser can choose a suitable file based on the screen size and pixel density.

Consider this product card:

<article class="product-card">
  <img src="headphones.jpg" alt="Black wireless headphones">
  <h2>Wireless Headphones</h2>
  <p>Noise-cancelling over-ear headphones.</p>
</article>

.product-card {
  background-image: url("card-noise.png");
  background-position: right bottom;
  background-repeat: no-repeat;
}

.product-card img {
  width: 100%;
  height: auto;
}

Step by step:

1. The browser reads the <article> and sees a product card.
2. It finds the <img> element and treats the headphones photograph as document content.
3. Assistive technology can announce: “Black wireless headphones.”
4. The browser loads headphones.jpg as the product image and preserves its aspect ratio because of height: auto.
5. CSS applies a subtle decorative card-noise.png image behind the card content.
6. If the decorative background fails to load, the product information is still complete. If the headphones image fails, its alt text still communicates what was intended.

Use <img> for:

• Product photos in an online store.
• A news article’s lead image.
• Diagrams, charts, maps, and infographics.
• User-uploaded profile photos.
• Brand logos when the logo identifies an organization or links to its home page.
• Images returned by an API or CMS as page content.
• Images that need responsive files through srcset or art direction through <picture>.

Use background-image for:

• Decorative textures and patterns.
• A full-bleed visual backdrop behind a hero section’s text.
• Repeating tile patterns.
• Background icons or visual accents that do not convey information.
• Layered visuals, such as an image beneath a gradient overlay.
• Effects where the image must be positioned, repeated, or cropped independently of the content.

Example of a layered decorative hero background:

.hero {
  color: white;
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.55)),
    url("city.jpg");
  background-position: center;
  background-size: cover;
}

In production code, teams usually make the decision based on meaning first, then layout requirements.

Content from a CMS or API

A product image URL is data, so it commonly becomes an <img>:

<img src="https://cdn.example.com/products/42.jpg" alt="Stainless-steel travel mug">

The application should store useful alternative text with the image data. A filename such as IMG_4829.jpg is not useful alt text.

Decorative layout assets

Design-system components often apply decorative assets through CSS classes:

.notice-banner {
  background: #eef6ff url("sparkles.svg") no-repeat right 1rem center;
}

The banner text remains accessible without the sparkles.

Responsive art direction

When a content image needs different crops on mobile and desktop, use <picture> rather than forcing an important image into CSS:

<picture>
  <source media="(max-width: 600px)" srcset="speaker-closeup.jpg">
  <img src="speaker-stage.jpg" alt="Speaker presenting on stage">
</picture>

Layout control with <img>

Developers can still get common background-like layouts with an image element:

.cover-image {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center;
}

<img class="cover-image" src="forest.jpg" alt="Misty forest trail" width="1600" height="900">

object-fit: cover lets a meaningful image fill a fixed frame while retaining semantic HTML.

Using a background for meaningful information

This is inaccessible because CSS backgrounds have no alt attribute:

<div class="product-photo"></div>

.product-photo {
  background-image: url("red-shoes.jpg");
}

Use an image element instead:

<img src="red-shoes.jpg" alt="Red running shoes with white soles">

Writing redundant alt text

Avoid repeating nearby text or adding “image of” without a reason:

<!-- Usually redundant -->
<img src="logo.svg" alt="Image of Acme logo">

Prefer:

<img src="logo.svg" alt="Acme">

If the logo is only decorative beside text that already says “Acme,” use alt="".

Omitting dimensions on content images

<img src="article-photo.jpg" alt="A person writing notes">

The image can still work, but the page may shift as it loads. When known, include the intrinsic dimensions:

<img src="article-photo.jpg" alt="A person writing notes" width="1200" height="800">

Assuming background-size: cover shows the whole image

cover fills the box and can crop edges. Use contain when showing the full decorative image matters, or use <img> when the complete image is meaningful.

Putting essential text inside an image

Text embedded in an image is harder to resize, translate, search, and access. Prefer real HTML text over a decorative background or image whenever possible.

<img> versus inline SVG

Use an inline SVG when the graphic is part of the page and you need to style or interact with its individual paths. Use <img src="graphic.svg"> when the SVG is simply an external image file. Use CSS backgrounds for SVGs only when they are decorative.

• Use <img> when the image is meaningful content.
• Give meaningful images useful alt text.
• Use alt="" for an HTML image that is purely decorative.
• Use background-image for decoration that does not need an accessible description.
• Use width and height on <img> when the image’s intrinsic dimensions are known.
• Use srcset, sizes, or <picture> for responsive content images.
• Use object-fit: cover to crop an <img> into a fixed frame.
• Use background-size: cover to fill an element with a decorative backdrop; expect possible cropping.
• Do not put information that users need only in a CSS background.
• Prefer real HTML text instead of text baked into images.

Should I use <img> or background-image for a hero image?

Use <img> if the hero image conveys information, such as a featured product, person, or news photograph. Use a CSS background if it is atmosphere or decoration behind the hero’s actual text.

Can a CSS background image have alt text?

No. CSS background-image has no alt attribute. If users need a text alternative, use an <img> or provide the information as real text in the document.

Is <img> better for SEO than background-image?

An <img> is document content and can include alt text, making its purpose clearer to assistive technology and search systems. The main reason to choose it, however, is semantics and accessibility—not SEO alone.

Can I make an <img> behave like a background?

Yes. Use a fixed container size or aspect-ratio with object-fit: cover. This provides a cover-style crop while retaining alt text and image semantics.

Should decorative images use <img alt=""> or CSS backgrounds?

Both can be valid. Prefer CSS when the image is genuinely styling. Use <img alt=""> when it is part of the markup for a practical reason, such as an image inside a component whose structure requires it.

Does background-image work in modern browsers?

Yes, standard CSS background images are broadly supported. The decision is usually about semantics, accessibility, and layout—not basic browser support.

Can background images be responsive?

Yes. CSS media queries can switch background files or positions. For meaningful responsive imagery, <img> with srcset or <picture> is typically the clearer choice.

• HTML semantics — choosing elements according to what content means.
• Alt text and web accessibility — providing useful text alternatives for non-text content.
• Responsive images — selecting image sizes and crops with srcset, sizes, and <picture>.
• CSS object-fit — making an <img> fill or fit within a layout box.
• CSS background properties — controlling image position, repetition, size, and layers.
• Cumulative Layout Shift (CLS) — reserving image space with width and height.
• Progressive enhancement — ensuring important content remains available when styling or images fail to load.