Background image is not responsive

Hi Zerif team!
Even renaming the new background image and replacing the default one on the server, the background is not responsive. How to fix this problem?

Still nothing? I think it’s a big problem if I am not the only one…

Hi,

Try adding the following CSS to your site:

body.custom-background {
    background-size: cover !important;
}

Regards,
Hardeep

Thank you for your advice, Hardeep. I already tried that method reading the other post about the background issue, but it didn’t work. The background image got even more enlarged with the smartphone.

So I tried to delete the theme, reinstalled it (version 1.8.2.2), and used the default background image. It is still not responsive. Please let me know if there are other ways to fix this or to find out what is causing the problem.

Thank you for your help!

That’s weird. It worked for me on your site. Please leave the CSS added and let me know. ??

Hi Hardeep: Thanks for looking into this and helping me.

Can you explain what you mean by, “Leave the CSS added”? Do you mean to add the body.custom-background CSS? Or do you mean something else.

Also, you said it works for you. Can I ask what phone/OS you are using? We tried with+
iPhone 5 (IOS) (safari)
iPad (safari)
Android on Samsung Galaxy (chrome)

When we hold the phone upright (vertical), it zooms in and you can only see the man in the middle, not all 5 people.

This is strange, because it worked before, scaling the picture depending on which way we held the phone. But now it does not.

Also, this seems that it may have happened around the time that we upgraded to the latest version of WordPress; I’m not sure that’s what caused the problem, but maybe there’s some relation?

Thank you.

Hi!! We have the exact same problem. And I saw that many more people are experiencing the same. Did you find an answer to this yet? I have another thread with this issue and I havent got any responses yet. Please let me know. Thanks!!!!!!!!

Hi rserrab!

It’s good to know I’m not the only one who have this issue (I don’t mean it’s good to have this issue though :)). Since the method Hardeep mentioned above didn’t work, I’m still waiting for responses from zerif team. Hopefully they will give us a solution soon.

Hello everyone!

I, too, am experiencing a responsive issue on mobile. I did however notice that responsive works as it should on 2 different Android OS. My site is https://www.sosforyou.com

Here are the details of the devices used:

Responsive verified as working

T-Mobile LG G4 H81110h running Android 5.1
Metro PCS Samsung SMG386T1 running Android 4.4.2

Responsive not working

Verizon iPhone 5c Model MGFL2LL/A
AT&T iPad Mini Model MD537LL/A
iPad Mini Model MD541LL/A

Hardeep, I have tried your custom css suggestion however it did not work on iOS. Any suggestions on what we can use to remedy the responsive issue? Thanks so much.

Zerif team,

Please help us to solve this issue!

It’s confusing with all the replies. Could you all just give me the links to your website, one-by-one, so I could check them all? ??

Hi, it looks like the links are posted above, but here’s mine again:

https://teamwealthinvestments.com/

If you open this on an IOS device (iPhone, iPad etc) at landscape, then turn to portrait, the picture doesn’t resize itself, but rather zooms into the guy in the middle.

Before the latest WordPress update, the picture used to resize so that all the people were seen whether the iPad/iPhone/etc was portrait or landscape. After a recent WordPress update, it started exhibiting it’s current behavior where the picture does not resize when the orientation of the device is changed.

Hello Orieneko,

Do you have the latest version of the theme? That should be 1.8.2.3

Best regards,
Alexandra

I have the latest WP 4.3 and latest Zerif lite 1.8.2.3, however my site is not even showing on iphone 5c. There seem to be a big element ( have no idea what it could be: a header, nav, who knows) that is blocking everything else. I know the content is there, I can catch a glimpse of it beneath the unknown element as I scroll up and down. This is the most frustrating mystery because everything works when I resize in Chrome. I also checked on Browserstack.com ( just a screenshot) and it’s showing up fine. Well, let me rephrase that: the background still looks like crap, but at least it’s showing. I can deal with the background that’s showing… It’s when it’s blocked by I don’t know what that’s when it really gets to me…

Never mind my mysterious element issue. I don’t know what I did but it’s fixed. I’ll just have to play around with media queries to get that background image to display more or less properly.