Search code examples
htmlcssresponsive-designbackground-image

Possible for Img srcset into background-image?


I have a responsive header section but I need to transfer the image from the <img> tag into background-image - is this possible?

Below is the current img tag:

<img src="img/images-header.jpg"
     srcset="img/images-header@2x.jpg 2x,
             img/images-header@3x.jpg 3x"
     class="Images-Header">

And the CSS is

.Images-Header {
  width: 320px;
  height: 456px;
  margin: 60px 0 0;
  padding: 105px 29px;
  object-fit: contain;
}

Basically, I need to have the image responsive across devices, is it possible to have the srcset into background-image or the same effect?

Many thanks,


Solution

  • No, that's not possible. But you can use media queries to load different versions/sizes of your background-image depending on screen dimensions or other @media parameters like pixel ratio or similar.