CSS image-set
113
6
88
113
Similar to the srcset attribute for <img> elements, the image-set CSS function allows to select different images depending on screen resolution or browser support.
.hero {
background-image: image-set(
url("small-resolution.jpg") 1x,
url("medium-resolution.jpg") 2x,
url("high-resolution.jpg") 3x
);
}
It can be used with any kind of image, even gradients, and can support different formats:
.gradient {
background-image: image-set(
linear-gradient(red, blue) 1x,
linear-gradient(red, cyan, blue) 2x
);
}
.formats {
background-image: image-set(
url("image.avif") type("image/avif"),
url("image.jpg") type("image/jpeg")
);
}