# Render Images with img, Not background-image

**MUST** · **ID:** `content-image-tag-not-background` · **Category:** content
**Source:** [Rauno](https://interfaces.rauno.me/)
**Interactive version:** https://ui-guides-agent-rules.netlify.app/principles/content-image-tag-not-background

> MUST: Render content images with `<img>` + meaningful `alt`, never CSS `background-image` — a background has no role, no accessible name, and no "copy image" context menu. Reserve `background-image` for textures and gradients.

Use an img element for content images so they carry alt text and native save and copy affordances

A CSS background is decoration as far as the platform is concerned: it has no role, no accessible name, and no context menu entries, so screen readers skip it and users cannot save or copy it. Reserve background-image for textures and gradients, and give anything that is content an img with meaningful alt text (or an empty alt when it is purely decorative).

## Bad — do not do this

`content-image-tag-not-background-bad`

```tsx
const PHOTO =
  'https://images.unsplash.com/photo-1522071820081-009f0129c71c?w=320&h=160&fit=crop';

export function ImageTagNotBackgroundBad() {
  return (
    <div className="w-full max-w-sm space-y-4">
      <div className="bg-card border border-border rounded-lg p-4 space-y-3">
        <div
          role="presentation"
          className="w-full h-32 rounded-md bg-muted bg-cover bg-center"
          style={{ backgroundImage: `url(${PHOTO})` }}
        />
        <p className="text-xs text-muted-foreground font-mono">
          {'<div style="background-image: url(team.jpg)" />'}
        </p>
        <div className="p-2 bg-muted rounded text-xs text-muted-foreground space-y-1">
          <p className="font-medium text-foreground">Right-click menu</p>
          <p>Back · Reload · View Page Source</p>
          <p className="text-error">No "Save Image As…", no "Copy Image"</p>
          <p className="text-error">Screen reader: skipped, it isn't an image</p>
        </div>
      </div>
      <p className="text-xs text-error">
        A CSS background is decoration, not content: it has no alt text, no
        role, and the user can't save or copy it
      </p>
    </div>
  );
}
```

## Good — do this

`content-image-tag-not-background-good`

```tsx
const PHOTO =
  'https://images.unsplash.com/photo-1522071820081-009f0129c71c?w=320&h=160&fit=crop';

export function ImageTagNotBackgroundGood() {
  return (
    <div className="w-full max-w-sm space-y-4">
      <div className="bg-card border border-border rounded-lg p-4 space-y-3">
        <img
          src={PHOTO}
          alt="Four engineers reviewing a deployment on a shared laptop"
          width={320}
          height={128}
          className="w-full h-32 rounded-md object-cover bg-muted"
        />
        <p className="text-xs text-muted-foreground font-mono">
          {'<img src="team.jpg" alt="Four engineers…" />'}
        </p>
        <div className="p-2 bg-muted rounded text-xs text-muted-foreground space-y-1">
          <p className="font-medium text-foreground">Right-click menu</p>
          <p>Open Image in New Tab · Save Image As… · Copy Image</p>
          <p className="text-success">
            Screen reader: "Four engineers reviewing a deployment on a shared
            laptop, image"
          </p>
        </div>
      </div>
      <p className="text-xs text-success">
        Content images belong in an img: alt text for screen readers, and the
        native save/copy affordances users expect
      </p>
    </div>
  );
}
```

## References

- [interfaces.rauno.me](https://interfaces.rauno.me/)
- [MDN: img element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img)
- [W3C WAI: Images tutorial](https://www.w3.org/WAI/tutorials/images/)