inline css for responsive background-image

[qvintusgud]

I have been searching around for the answer if its possible to set some sort of srcset to a background-image.

Im using acf plug in i wordpress and I have a field where I can set the background image.

I get the image from the variable and can be used like this:

style=”background-image:url($image[url])”

I wonder If its possible to make it responsive in any way?

best regards,

[Paulie_D]

Responsive how?

It sounds like you’re after background-size but I’m not entirely clear what it is you are trying to achieve.

[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.

[Paulie_D]

OK….then no, that’s not possible.

[Author]

Posts