Background vs img

Learn the <img alt=""> rule for decorative images.

img or background-image?

There are two ways to put an image on a page: HTML's <img> or CSS's background-image. Which one you pick depends on whether the image is content or decoration.

Content images (a news photo, a product shot, an infographic) go in <img>; they take an alt text, are read by screen readers and indexed by search engines. Decorative images (a background texture, a divider line) go in CSS; they add no meaning and should stay silent for screen readers.

Empty alt vs no alt

Sometimes an image sits next to content but is still decoration, like an ornamental divider beside a <figure>. If you must put it in an <img>, write alt="" (an empty value).

An empty alt is not the same as no alt. With alt="" the screen reader skips it on purpose; without alt, the screen reader has to read out the file name. So always write alt, even when empty.

Exercise Write a figure, a content img and a decorative img

Add a <figure> to body. Inside it put an <img> with src set to art-piece.jpg and alt set to Flowers. Inside the figure add a <figcaption> with the text Flower show. After the figure add a decorative <img> with src set to divider.png and an empty alt.

Show example solution

<body>
  <figure>
    <img src="art-piece.jpg" alt="Flowers">
    <figcaption>Flower show</figcaption>
  </figure>
  <img src="divider.png" alt="">
</body>

Test yourself

Which is the right markup for a decorative ornament?
- <img src="orn.png" alt="ornament">
- <img src="orn.png" alt="Decorative ornament">
- <img src="orn.png" alt="">
- <img src="orn.png" alt="Background ornament">
Show answer

<img src="orn.png" alt=""> — Correct. Decorative images keep alt empty; the screen reader skips them.

Write an empty alt on a decorative img

<img src="divider.png" ____>

Show answer

<img src="divider.png" alt="">

Match each case to the right method

News photo

img + full alt
Background texture

CSS background
Ornamental divider

img + empty alt
Brand logo

img + logo text

Next lesson: Summary - Responsive hero

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies