Background image breaking on phone but looks good in designer

Has anyone seen a similar issue? The designs looks fine in all breakpoints in the designer but if I open the website on my actual phone, it breaks. I have set a background image in the body class as fixed and contain, but on my phone it isn’t fixed.

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Hi Lawrence,

Can you share the link to the live site?

You have this line applied background-attachment: scroll!important; which stops the body’s BG from being fixed. Maybe by custom code on the projects custom code section?

I think that if you change the fixed BG from the body to a separate div it will work.

Hmm is there a way to remove that? I also tried using a div as a fixed bg, but for reason it either covers up things like a sticky footer or it pushes it down. Is there a good way to set a div as a fixed background that basically sits in the back at all times and lets content in front?

My footer is now covered up

Change the footers z-index

I tried that but it didn’t do anything :confused:

Trying my best to troubleshoot but what do you think is causing this white block blocking the bg I have? I turned all sections off and no classes assigned to the body but still nothing

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.