Responsive Background Images — CSS image-set() and Media Queries

Responsive Background Images

For decorative images set via CSS background-image, you cannot use HTML srcset. Instead, use CSS image-set() or media queries.

CSS image-set()

The image-set() function is the CSS equivalent of srcset for background images:

.hero {
  background-image: image-set(
    url("hero.avif") type("image/avif"),
    url("hero.webp") type("image/webp"),
    url("hero.jpg") type("image/jpeg")
  );
  background-size: cover;
  background-position: center;
}

Resolution-Based Switching

.hero {
  background-image: image-set(
    url("hero-1x.webp") 1x,
    url("hero-2x.webp") 2x,
    url("hero-3x.webp") 3x
  );
}

Media Query Approach (Wider Support)

.hero {
  background-image: url("hero-640w.jpg");
}

@media (min-width: 641px) {
  .hero { background-image: url("hero-1024w.jpg"); }
}

@media (min-width: 1025px) {
  .hero { background-image: url("hero-1536w.jpg"); }
}

/* High-DPI variants */
@media (min-width: 641px) and (min-resolution: 2dppx) {
  .hero { background-image: url("hero-2048w.jpg"); }
}

When to Use CSS vs HTML Responsive Images

Criteria	HTML (srcset/picture)	CSS (image-set/media queries)
Content images	Preferred	Not suitable
Decorative images	Works but adds markup	Preferred
SEO relevance	Indexed by search engines	Not indexed
Art direction	Excellent (picture)	Good (media queries)
Format negotiation	Native (picture type)	Limited (image-set type)
Lazy loading	Native attribute	Requires JS or CSS tricks

Key Rule

If an image conveys content or meaning, use HTML <img> with srcset — it's accessible, indexable, and supports native lazy loading. Use CSS background images only for truly decorative purposes.