Is there a srcset equivalent for css background image

css

responsive-design

image-optimization

css-features

byAlex Kataev·Jan 24, 2025

Media queries can emulate srcset for CSS backgrounds, tailoring background-image URLs for different screen resolutions.

/* Common case image */
.background { background-image: url('image.jpg'); }

/* For the retina folks */
@media (min-resolution: 2dppx) {
  .background { background-image: url('image-2x.jpg'); }
}

/* For phone buddies */
@media (max-width: 768px) {
  .background { background-image: url('image-small.jpg'); }
}

By matching conditions much like srcset, you can optimize both load times and visuals.

Diving into `image-set`

image-set is the CSS equivalent for srcset designed for background images. It gives you the power to assign multiple image resources that the browser can select from:

.element {
  background-image: -webkit-image-set(
    url('image-1x.jpg') 1x,
    url('image-2x.jpg') 2x,
    url('image-3x.jpg') 3x
  );
  background-image: image-set(
    url('image-1x.jpg') 1x,
    url('image-2x.jpg') 2x,
    url('image-3x.jpg') 3x
  );
}

Remember to include both, the standard and the -webkit- prefix for complete cross-browser compatibility. No browser left behind!

Using media queries & `object-fit`

In the quest for fine-tuned control, media queries can be combined with object-fit for <img> tags, mimicking a background while preserving aspect ratios:

.img-background {
  object-fit: cover; 
  /* object-fit: contain; can also be used based on image demands */
}

This method keeps aspect ratio intact while filling its container, acting like background-size properties.

Dynamic JS for responsive fallbacks

When your project demands dynamic solutions, JavaScript can dynamically update background images once the page has loaded based on the <img> element with srcset:

const img = document.querySelector('img[data-responsive-background]');
img.onload = () => {
  const backgroundElement = document.querySelector('.element');
  backgroundElement.style.backgroundImage = `url(${img.currentSrc})`;
};

Positioning for flexible layouts

Positioning plays a key role in accommodating dynamic backgrounds. Use position: absolute or relative on container elements to attain flexible layout designs:

.image-container {
  position: relative;
}
.image-container .background {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

Creating image layers to sit atop the background image, much like a img tag would let the content do.

Strategies for Compatibility and polyfills

Although image-set is widely recognized, for broad range compatibility consider a polyfill to guarantee all browsers, even the old ones, handle responsive images gracefully:

<!--[if lte IE 9]>
<script src="path/to/image-set-polyfill.js"></script>
<![endif]-->

Testing across devices for consistency

Device testing is non-negotiable. Confirm consistency across various devices and browsers:

Test your solution on real hardware whenever possible.
Use browser developer tools to simulate resolutions.
Compare with popular device dimensions.

Additionally, ensure your URL syntax within the url() function in CSS is correct:

/* Correct syntax */
background-image: url('path/to/image.jpg');

/* Incorrect - this might end up in divorce with some browsers */
background-image: url(path/to/image.jpg);

Real-life example

Practical implementation of these techniques can be as followed:

/* Using `image-set` */
.background {
  background-image: -webkit-image-set(
    url('footer-bg-small.jpg') 1x,
    url('footer-bg-large.jpg') 2x);
  background-image: image-set(
    url('footer-bg-small.jpg') 1x,
    url('footer-bg-large.jpg') 2x);
}

/* Example with media query and object-fit for an img */
@media (max-width: 768px) {
  .responsive-img {
    width: 100%;
    height: auto;
    object-fit: cover; /* Maintain aspect ratio */
  }
}

/* JavaScript for dynamic background loading */
document.addEventListener('DOMContentLoaded', () => {
  const img = document.querySelector('img[data-responsive-background]');
  img.onload = () => {
    document.body.style.backgroundImage = `url(${img.currentSrc})`;
    document.body.style.meme = `Much resolutions. So CSS. Wow`;
  };
});