When to Use HTML img vs CSS background-image

By the end of this page, you will know how to choose between <img> and background-image based on an image’s purpose. You will be able to make images accessible, responsive, performant, and easier to maintain.

The main decision is meaning: ask whether the image is part of the page’s content or merely part of its visual presentation.

Use an HTML <img> element when the image contains information that users need. Examples include a product photo, author portrait, chart, article illustration, logo, or uploaded user image. An <img> is part of the document structure, can have alternative text through alt, and supports image-specific HTML features.

Use CSS background-image when the image is decorative or helps style an element without adding content. Examples include a textured card surface, a hero-section backdrop, a repeating pattern, or an image used only as a visual crop behind text.

This distinction matters because browsers, assistive technologies, search engines, and developers treat HTML content differently from CSS presentation:

• <img> can provide an accessible text alternative with alt.
• <img> participates naturally in document content and can reserve layout space using width and height.
• <img> supports responsive source selection with srcset, sizes, and <picture>.
• background-image is controlled with CSS properties such as background-size, background-position, and background-repeat.
• A CSS background is generally not announced as meaningful content to screen-reader users.

A useful rule is: if removing the image changes what the page says, use <img>; if it only changes how the page looks, use background-image.

Think of a web page as a newspaper.

• An <img> is a photograph inside an article. It may need a caption or a description because it contributes information to the story.
• A CSS background image is the paper texture, colored banner, or decorative border around the article. It affects the design, but readers do not lose the article’s meaning if it disappears.

Do not choose based only on which option is easier to style. First decide whether the image is content or decoration; then choose the appropriate tool.

An HTML image uses src for the file location and alt for its text alternative:

<img
  src="/images/mountain-trail.jpg"
  alt="A hiker walking along a mountain trail at sunrise"
  width="1200"
  height="800"
>

Use this when the photo is meaningful content. The alt text communicates the useful meaning of the photo to people who cannot see it. The width and height attributes help the browser reserve the correct space before the file finishes loading.

A CSS background image is assigned in a stylesheet:

<section class="hero">
  <h1>Plan your next adventure</h1>
  <p>Find trails, guides, and packing checklists.</p>
</section>

.hero {
  min-height: 20rem;
  padding: 3rem;
  color: white;
  background-color: #1f3b2d;
  background-image: linear-gradient(rgb(0 0 0 / 45%), rgb(0 0 0 / 45%)),
    url("/images/mountain-trail.jpg");
  background-position: center;
  background-size: cover;
}

Here, the image is a backdrop for the hero section. The heading and paragraph contain the actual information, so the background can remain decorative.

For a decorative HTML image that must exist in the markup, use an empty alt value:

<img src="/images/divider-leaves.svg" alt="">

An empty alt tells assistive technologies to ignore the decorative image. Do not omit the alt attribute: missing alt is not the same as intentionally marking an image decorative.

Consider a product card:

<article class="product-card">
  <img
    src="/images/blue-mug.jpg"
    alt="Blue ceramic mug with a curved handle"
    width="600"
    height="600"
  >
  <h2>Blue ceramic mug</h2>
  <p>$18.00</p>
</article>

.product-card {
  border: 1px solid #d1d5db;
  border-radius: 0.5rem;
  overflow: hidden;
}

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

Step by step:

1. The browser reads the <img> element and starts requesting blue-mug.jpg.
2. It uses width="600" and height="600" to calculate the image’s expected square space.
3. If the image cannot load, the alternative text still identifies the product image.
4. A screen reader can announce the alternative text when it reaches the image.
5. The CSS makes the image fill the card’s available width while preserving its original aspect ratio.
6. The card’s border and rounded corners are presentation details, so CSS controls them.

Now compare a card texture:

.product-card {
  background-image: url("/images/paper-texture.png");
  background-repeat: repeat;
}

This texture does not describe the mug or provide product information. It is an appropriate CSS background.

Use <img> for:

• Product photos in an online store.
• A news article’s featured image or an instructional diagram.
• User avatars and profile photos when they identify a person.
• A company logo that acts as meaningful branding or as a link to the home page.
• Charts, screenshots, maps, and infographics. Provide useful alt text or nearby text alternatives when needed.
• Images uploaded from a CMS or by users, where the image is part of the data being displayed.

Use background-image for:

• A decorative hero banner behind a page title.
• Repeating textures, gradients, decorative shapes, and visual flourishes.
• A fixed-size thumbnail area where an image is intentionally cropped with background-size: cover.
• Hover-state icons or small visual treatments when they are not the only way to communicate an action.
• Theme-specific decoration, such as a seasonal background added by a CSS class.

For a hero banner, it is common to use a background image for decoration while keeping the important text as real HTML text. If the hero image itself communicates important information, use an <img> or provide the information in text rather than relying on the background alone.

In production code, teams usually make the decision through component design and content rules.

Content components use <img>

A product component receives image data from an API, so the image belongs in HTML:

<article class="product-card">
  <img
    src="/cdn/products/mug-800.jpg"
    srcset="/cdn/products/mug-400.jpg 400w,
            /cdn/products/mug-800.jpg 800w,
            /cdn/products/mug-1200.jpg 1200w"
    sizes="(max-width: 40rem) 100vw, 20rem"
    alt="Blue ceramic mug with a curved handle"
    width="800"
    height="800"
    loading="lazy"
  >
  <h2>Blue ceramic mug</h2>
</article>

srcset and sizes let the browser choose a suitable file size. loading="lazy" is often useful for images below the initially visible area. Do not lazily load the main image users are expected to see immediately.

Decorative variants use CSS classes

A design system may use a class to select a decorative background:

<section class="promotion promotion--summer">
  <h2>Summer sale</h2>
  <p>Save on outdoor equipment this week.</p>
</section>

.promotion {
  padding: 2rem;
  color: white;
  background-color: #155e75;
  background-size: cover;
  background-position: center;
}

.promotion--summer {
  background-image: url("/images/summer-leaves.jpg");
}

Guard against image failure

If an image is meaningful, preserve useful text even when it fails. Clear alt text and visible product names are important. For image-heavy applications, developers also provide fallback styling, validate uploaded file types, and generate multiple image sizes on the server or image CDN.

Avoid putting essential text in an image background. Text in HTML can be selected, translated, resized, searched, and read by assistive technology.

Using a background for meaningful content

Broken approach:

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

.product-photo {
  background-image: url("/images/blue-mug.jpg");
}

If this is the only product photo, it has no alt text and is not semantic content. Use an <img> instead.

Omitting alt

Broken approach:

<img src="/images/receipt-total.png">

Avoid this by always deciding on an alternative:

<img src="/images/receipt-total.png" alt="Receipt total: $42.50">

For purely decorative images, use alt="", not a made-up description.

Writing unhelpful alternative text

Avoid file names and redundant phrases:

<img src="mug.jpg" alt="Image of mug.jpg">

Prefer the information users need:

<img src="mug.jpg" alt="Blue ceramic mug">

Using cover when the whole image must remain visible

background-size: cover fills a box but may crop edges. That is good for decoration, but risky for diagrams, faces, or product photos. Use <img> with object-fit: contain when every part must be visible.

Forgetting image dimensions

Without dimensions, images can cause layout shifts as they load. Add intrinsic width and height attributes when known:

<img src="/images/logo.svg" alt="Northwind Coffee" width="240" height="60">

Relying on a background image for readable text contrast

A background can vary in brightness. Add a solid or gradient overlay and test contrast, or choose a more reliable design. Never make critical text unreadable because of the image behind it.

<img> and CSS background-image can both be styled and both can be responsive. The important difference is not raw capability; it is whether the image is meaningful page content.

• Use <img> when an image is content or conveys information.

• Use background-image when an image is decorative presentation.

• Meaningful image:

  <img src="photo.jpg" alt="Useful description" width="800" height="500">
  

• Decorative image in HTML:

  <img src="flourish.svg" alt="">
  

• Decorative CSS background:

  .banner {
    background: url("banner.jpg") center / cover no-repeat;
  }
  

• Use srcset and sizes for responsive content images.

• Use object-fit: cover for an <img> that should fill a frame and may be cropped.

• Use object-fit: contain when the entire image must remain visible.

• Use background-size: cover for decorative backgrounds that should fill their area.

• Include width and height on <img> elements where possible to reduce layout shifts.

• Never put essential text or instructions only inside a background image.

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

Use <img> when the logo identifies the organization or links to the home page. Give it appropriate alternative text, such as alt="Northwind Coffee". A purely decorative duplicate logo can use a CSS background or alt="".

Can a CSS background image have alt text?

Not directly. CSS backgrounds are presentation, not document content. If the image needs a text alternative, use an <img> or provide the same meaningful information as HTML text.

Is background-image better for responsive design?

Not generally. CSS backgrounds respond well to layout changes, especially with background-size: cover. But <img> has better built-in support for choosing an appropriate image resource with srcset, sizes, and <picture>.

Can I crop an <img> like a background image?

Yes. Place it in a sized container and use object-fit: cover with object-position.

.thumbnail {
  width: 16rem;
  height: 10rem;
  object-fit: cover;
  object-position: center;
}

Should a decorative <img> have no alt attribute?

No. Use an empty attribute: alt="". This explicitly marks it as decorative. Omitting alt can cause assistive technology to expose unhelpful file information.

Which option is better for performance?

Neither is automatically faster. Performance depends on file size, image dimensions, loading priority, caching, and responsive resource selection. For important content images, <img> offers browser features such as srcset, sizes, and loading. Optimize the actual image files either way.

Can I put text over an <img>?

Yes. Use a positioned wrapper around the image, while keeping the image as <img> if it is meaningful. If the image is only a decorative backdrop, a CSS background may be simpler.

• Alternative text (alt) — describes the purpose of meaningful images for assistive technologies.
• Semantic HTML — helps choose elements based on meaning instead of appearance.
• Responsive images (srcset, sizes, and <picture>) — lets browsers select suitable image files for a device and layout.
• CSS object-fit and object-position — control how an <img> fits and crops within a container.
• CSS background properties — control background size, position, repetition, color, and layering.
• Cumulative Layout Shift (CLS) — image dimensions can prevent content from moving while images load.
• Color contrast — text over image backdrops must remain readable.
• Lazy loading — can defer off-screen images, but should be used carefully for important visible images.