Reply To: inline css for responsive background-image

[qvintusgud]

I will try to explain a little bit better,

I have a full with div with a background image,

I get the image from a custom filed and set it by a style tag on the div like:
style=”background-image:url($image[url]);

The problem I have is that this big image loading on every type of screen so I wonder if its possible to have som sort of srcset or anything on the div with the background image.

If I should set the background image all by css I should be something like this:

.bg-image {
width: 100vw;
height: 500px;

background-size: cover;
background-position: center;

background-image: url(/images/image-lg_1x.jpg)
background-image: -webkit-image-set(
url(/images/image-lg_1x.webp) 1x,
url(/images/image-lg_2x.webp) 2x
);
background-image: image-set(
url(/images/image-lg_1x.jpg) 1x,
url(/images/image-lg_2x.jpg) 2x
);
@media(max-width: 900px) {
background-image: url(/images/image-md_2x.jpg);
background-image: -webkit-image-set(
url(/images/image-md_1x.webp) 1x,
url(/images/image-md_2x.webp) 2x
);
background-image: image-set(
url(/images/image-md_1x.jpg) 1x,
url(/images/image-md_2x.jpg) 2x
);
}
@media (max-width: 600px) {
background-image: url(/images/image-sm_2x.jpg);
background-image: -webkit-image-set(
url(/images/image-sm_1x.webp) 1x,
url(/images/image-sm_2x.webp) 2x
);
background-image: image-set(
url(/images/image-sm_1x.jpg) 1x,
url(/images/image-sm_2x.jpg) 2x
);
}
}

but in my case I set the background-image in the style tag and looking for some way to use different image depending on the screen.