Mobile Version Issue: Background Image Disappears

[zelenny]

Hello,

I was having a similar issue as this post except on my site when I add the CSS from the post, it deletes the background image and my title text is a similar color to the white background so it blends in. (I’m on the Ethos theme if that helps)

I tried making the background pattern the same background image and that worked for a bit but now they’re both gone on my mobile device. In the preview when I’m designing it it’s actually correct (the background image is there) but when I look at it live on mobile the background is gone. I deleted the CSS now from that post I linked above, and even then the background is not there on mobile (maybe there’s a delay?). I have tried doing “Purge All” to the cache at the top several times as well,

I would appreciate any insight! Let me know if I missed any important info,
Thank you!

Update: the background has also disappeared from the desktop version. I don’t understand what the problem is since in the preview the background image is there where it’s supposed to be I feel like I’ve looked everywhere and can’t find the issue, I didn’t change any major settings before this happened, or install or update any plugins in the time this started happening and everything is up to date.

[ruenel]

Hello @Zelenny,

Thanks for writing in!

Do you want your site to display like this where in the background image is visible?

If that is the case, then please add the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)

.x-container.main:before {
    display: none;
}

.x-container>.offset {
    margin: 0 auto 30px;
    padding: 20px;
    background-color: white;
}

.x-header-landmark+.x-container>.offset>.x-sidebar {
    margin-top: 0;
}

.entry-content.content {
    margin-top: 0;
}

And if this is not what you meant to do, please provide us a screenshot of what you have in mind so that we can make appropriate adjustments.

Please let us know how it goes.

[zelenny]

Hi @RueNel,

Thanks for answering! I was able to find a possible reason for the issue, being the latest update of Google reCaptcha (v3). I uninstalled that and the background came back (using the CSS from the other support post I linked). The site should look like the photo you posted, except the sidebar should be directly on the green background, picture below! It also should be correct if looked at live right now,

I’m still going to save this code since the background image has been a bit fragile for me so far and I could see it coming up again if I update something so thanks so much for providing it!

Hope you have a great day,

[christian]

You’re welcome, Zelenny. Just note that the fullscreen background is powered by Javascript so if there’s a Javascript error that could halt other scripts from running, you will lose the background.

I see you have a background applied to the body through custom CSS. That is a good backup plan.

Thanks.

[zelenny]

Hi @RueNel,

Unfortunately, I’m having this issue again The background is showing in the editor but it’s missing from the live site. How can I modify your code to make the background look like the screenshot below (with the sidebar over the background instead of over white)? I appreciate it so much!

Thank you,

[rad]

Hi @zelenny,

It’s because of your cache plugin, I cleaned it and the background is now displaying. Please make sure to clear the caches for every change you made, or simply deactivate. Cache is only recommended on production stage where you’re done with the changes. And cache is always against change.

Thanks!

[zelenny]

Hi @Rad!

Thanks SO much for your help! That’s a great tip, I’m pretty new to Wordpress so I wasn’t aware of this cache stuff. I think I just turned the “Endurance Cache” off (screenshot below) but let me know if that’s not what you meant! I super appreciate your help,

[ruenel]

Hello @zelenny,

Yes that is where you can disable/enable the caching in your site.

Best Regards.