Content:
In our article on srcset, we outlined the importance of making images on your site responsive for the best user experience.
Unfortunately, srcset is only available when using the img tag. If you’re using another element, with the background-image CSS property, you’re out of luck.
With a bit of work, however, it’s possible to replicate the functionality of srcset on a background image.
CSS image-set() Function
The CSS4 specification adds a new CSS function, called image-set(). This function allows you to provide a set of images to use as the value for background-image.
.element {
background-image: image-set(
url('image-xl.jpg') 4x,
url('image-l.jpg') 3x,
url('image-m.jpg') 2x,
url('image-s.jpg') 1x
);
} Functionally, it works in the same way as srcset, but is defined in CSS rather than an HTML. Sizing can be defined in the same way too, using either x or w.
At the time of writing, browser support isn’t yet complete, with only Firefox offering full support.
Chrome and Chrome-based browsers have long had basic support, but require the -webkit- prefix. They also only work when the x sizing unit is used.
You can check the current level of browser support over at caniuse.com.
If you choose to use image-set(), it’s a good idea to add additional rules to act as a fallback.
.element {
background-image: url('image-m.jpg'); // fallback
background-image: -webkit-image-set(
url('image-xl.jpg') 4x,
url('image-l.jpg') 3x,
url('image-m.jpg') 2x,
url('image-s.jpg') 1x
);
background-image: image-set(
url('image-xl.jpg') 4x,
url('image-l.jpg') 3x,
url('image-m.jpg') 2x,
url('image-s.jpg') 1x
);
} The browser will first set the background image using the fallback. If the browser supports image-set(), the fallback will be overwritten with the new value. If not, the browser ignores the image-set(), and the fallback value remains.
There’s also a copy of the image set using the -webkit- prefix, for Chrome-based browsers.
There’s no reason you can’t use image-set() now, as long as you use a fallback. This is definitely one to keep an eye on as browser support improves.
CSS Media Queries
CSS media queries are often used to make sites responsive, changing structure and layout based on the width of the page.
You can take advantage of this to make your images responsive. If fact, you can already use CSS media queries with srcset, when using w widths.
Adding a media query is as simple as redefining the CSS rule for your element, using a different URL for the background-image property.
@media (max-width: 480px) {
.element {
background-image: url('image-s.jpg');
}
}You can add as many media queries as you need. Just remember that they’ll be applied in the order specified. You can use both a max-width and a min-width if necessary.
@media (min-width: 1920px) {
.element {
background-image: url('image-xl.jpg');
}
}
@media (min-width: 1440px) {
.element {
background-image: url('image-l.jpg');
}
}
@media (min-width: 960px) {
.element {
background-image: url('image-m.jpg');
}
}
@media (max-width: 480px) {
.element {
background-image: url('image-s.jpg');
}
}This can get a little complicated if you have a lot of width breakpoints, so it’s advised to keep them consistent and reuse the same break points for other properties.
Change the Tag
Ok, so this isn’t a way to make a CSS background-image responsive, which is why it’s last on the list.
It’s worth considering why you use background-image in the first place, and whether it’s possible to switch it out for an img tag.
It won’t always be possible, but using the full slew of img CSS properties can cover most use cases. Make sure you’re familiar with lesser used CSS properties, such as object-fit, to create a similar result.
Conclusion
Hopefully, you now have a better understanding how to make your background images responsive. Using one of the methods above, you could make a big difference to the loading speed of your site.