CODEWITHSUNDEEP
htmlcssresponsive-designbackground-image
trailrunner89
trailrunner89

Reputation: 99

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/[email protected] 2x,
             img/[email protected] 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,

Upvotes: 0

Views: 1297

Answers (1)

Johannes
Johannes

Reputation: 67778

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.

Upvotes: 2

Related Questions