# Crisp Background Images with CSS image-set()

URL: https://theosoti.com/short/sharp-background-images/
Published: 2025-08-28
Author: Theo Soti

> Serve sharp, responsive backgrounds with CSS image-set(). Let browsers choose the right asset for retina or standard screens efficiently.

## Serve sharp backgrounds without extra code.

Let the browser pick the right asset.

`image-set()` is like `srcset`, but for CSS.

You give multiple sources. The browser chooses the best one for the screen.

Why use it:

- Retina screens get crisp images.
- Regular screens download smaller files.
- No JavaScript. No hacks.

It also works in other image-accepting properties like content, list-style-image, and border-image(but with less browser support).

Using `image-set()` in a background-image property has almost 96% browser support!

Practical tips:

- Add a plain fallback first for older browsers:
  `background-image: url("evee.png");` then the `image-set()`.
- Keep file names consistent (@1x, @2x) to simplify builds.
- Pair with background-size: cover/contain as needed.
- Test AVIF/WEBP plus JPEG/PNG as a safe fallback.

`image-set()` helps serve crisp backgrounds on high-density screens without always downloading the heaviest asset. Add sensible fallbacks so lower-density devices still render quickly and clearly.

`image-set()` helps deliver sharper backgrounds on high-density displays without always forcing large assets. Keep sensible fallbacks to protect load performance.

Keep fallback rendering in mind so unsupported effects still produce clear, readable visuals.

A practical way to adopt `image-set()` is to scope it to one high-impact component first. After validation, expand gradually to matching components and avoid ad-hoc one-off overrides.

Pair `image-set()` with explicit `background-size` rules so high-density assets remain sharp without unexpected cropping.

---

If you liked this tip, you might enjoy the book, which is packed with similar insights to help you build better websites without relying on JavaScript.

Go check it out https://theosoti.com/you-dont-need-js/ and enjoy 20% OFF for a limited time!