htmlcssbackground-imagesrcset

Is there a srcset equivalent for css background image

img with srcset attribute looks like a great way of doing responsive images. Is there an equivalent syntax that works in css background-image property?

HTML

<img src="small.jpg" srcset="medium.jpg 1000w, large.jpg 2000w" alt="yah">

CSS

.mycontainer {
    background: url('what goes here?');
}
Solution

  • image-set is the equivalent CSS feature. We should add equivalent srcset functionality (defining resources according to their dimensions) to the spec.

    All major browsers released since May 4, 2023 support this without prefix. To support older browsers (mainly Chrome & Edge), you can add a variant with a -webkit- prefix, see Can I use.