[Resolved] header bkgd image disappears on mobile

[markus]

New user here. I’ve tried working in both the Customizer and making an Element and my static page background image does not appear on mobile. How do I get it to appear on mobile too?

[Leo]

Hi there,

The body background image should appear in mobile by default.

Any chance you can disable all plugins except GP Premium to eliminate conflicts from other plugins first?

Let me know 🙂

[markus]

I’m using Beaver Builder Pro. Does this matter?

Is there an easy way to disable all plugins temporarily without messing up my site?

[Leo]

BB shouldn’t cause this issue.

Are you able to disable site ground optimizer first?

If that doesn’t help, you could duplicate the current set up on a staging environment so we can do some testing.

Let me know 🙂

[markus]

SG Optimizer: no difference.

[Leo]

I can’t tell by reading the list of plugins unfortunately.

Are you able to start a staging site so we can do some testing?

[markus]

https://2020.STELLARSOUNDLABS.COM
2020ssl_staging

[Leo]

Now can you disable all plugins on the staging site?

Does the same issue occur on a page with GP only (without BB)?

[markus]

Verified, blank test page edited with WP editor still shows no image background on mobile (but shows image on desktop).

[Leo]

Can you try adding this CSS and see if it help?

@media (max-width: 768px) {
    body {
        background-image: url(https://MOBILE-IMAGE-URL);
        background-position: center center;
    }
}

[markus]

YES image showing on mobile now, though I will need to use a different image for mobile since it is completely cropped.

[Leo]

Edit the CSS above:
https://generatepress.com/forums/topic/header-bkgd-image-disappears-on-mobile/#post-1225438

[Author]

Posts