Background Image Not Responsive

Hello,

Not sure what you mean by “make it responsive”.

Can you please explain exactly what the problem is?

I’ve tested the fill screen preset and the image is stuck to the left of the screen unless you click the dot in the middle under “Position”. Perhaps that’s what you mean?

Oliver

I was having an issue with this as well. I had a background image set to “Fill Screen,” and I clicked the center dot for “Image Position.” It looked great when I previewed desktop/tablet/phone on the WP customizer.

But when I looked at it on my actual phone (iPhone X / Chrome), the background image was zoomed in much closer, so that instead of the entire image, I could only see a tiny portion of the top of the image.

To fix it, I created a new crop of my background image that was tall and skinny (phone-shaped) and then edited the CSS to call that image for mobile. I also changed the background-size to “contain” in the CSS.

Here’s the dev site and CSS:

https://yzb.e62.myftpupload.com/

@media only screen and (max-width: 481px) {
body.custom-background {
background-image: url(/NEW IMAGE URL HERE);
background-size: contain;
}
}

Hi, i am totally lost, maybe, because I did not built a site from a long time I

am using Twenty Twenty One Blocks Theme

I use a Centralized BG Image 2048, this is image ave several resized version

I used media query like this, or more complex some time

@media only screen and (max-width: 481px) {
body.custom-background {
background-image: url(/NEW IMAGE URL HERE);
background-size: contain;
}
}

I used several format of resized image also(max-width: 482px) {background-custom 300x218p.img (jpg/png)

I dit not use !Important! to force overriding

I tried background-size: cover/contain, but nothing really responsive, contain, seems the best alternative,

if someone can really help me, thank you