Fixed Background style changing to background-attachment: scroll on published site

[wzahra (Will Zahra)]

I’m having some trouble with setting a background image to fixed, where I get inconsistent results when I publish the page. I made a short video here to explain:

Read only:

https://preview.webflow.com/preview/atlas-5a7289?preview=fe098e3f6a64474b28bb8f65a44a022f

Live site:

http://atlas-5a7289.webflow.io/

I have checked the developer consoles for Chrome and Firefox and didn’t see anything suspicious. I have tested this in Chrome Incognito and Firefox Private modes, but no difference.

I’m not sure if I’m just not using Webflow correctly; thanks in advance for any help.

[vincent (Webflow Expert)]

Hi.

To begin with, define an actual image instead of testing with the placeholder image.

And just to be sure, start fresh with your classes, remove the actual ones and define new ones, add a fix background, and test again. i’m sure this will solve some things.

[cyberdave (Dave Sloane)]

As a note, I tested in Chrome, and it seemed to scroll for me, but might be due to background-attachment: fixed getting changed to background-attachment:scroll (like classic ios bug)

@wzahra, I am looking into this further. Although I think this is going to render correctly in most browsers, I will check with dev team to see what we can do to eliminate this issue.

Also, applying the Fixed position to an element like a div, will usually render ok on mobile, it seems that the issue crops up when using fixed on a bg image style attribute with position Fixed, instead of an actual tag like <div> with position Fixed.

[vincent (Webflow Expert)]

I tested in Chrome, and it seemed to scroll for me

Forgot to mention that it works for me too.

[wzahra (Will Zahra)]

define an actual image instead of testing with the placeholder image

Thanks @vincent I applied an actual image, but no change. I haven’t yet reset the classes, but I’ll try that, too.

[vincent (Webflow Expert)]

Could it be a nasty case of cache issue with your browser? Here are some steps.

1. open the publish dialog of the Designer and click unpublish
2. open the designer in Chrome Canary (download and install, it’s a development version of chrome that you can be sure doesn’t share any cache with Chrome, it’s always handy to have around)
3. publish and check from Canary

Because really I can’t reproduce this bug on any browser. I know fixed background won’t be fixed on mobile, iOS, but that has nothing to do with your issue here.

[wzahra (Will Zahra)]

I downloaded Canary and it works fine, there. I cleared the cache in my regular Chrome and also Firefox, but still not working. I also tried in regular Chrome Ignotito mode, but that didn’t work, either.

Dave suggested implementing the following, but I’ll need to enlist some help as I’m having difficulty following the instructions:

mobile-fixed-background - Webflow

[cyberdave (Dave Sloane)]

Hi @wzahra, thanks, I made a quick video, does this help?

p.s. in my video, I was fooling around with the background color, you can play with whatever content colors you want, or leave individual sections as transparent. Those sections that are transparent will reveal the fixed background. This is just a temporary workaround/solution that may help while the issue is being looked into.

[wzahra (Will Zahra)]

Thanks so much for going to the effort of making the video - just what I needed! That’s fixed now.

[rico]

just had the same problem like the thread creator and ur little video helped alot !
problem fixed !

thanks a lot !

[iiitide (Daniel)]

what if I need two fixed background images in different sections of the page?

If I do it as fixed background for each specific page, the fix image on each div works fine unless I’m on a touchscreen laptop. this is the css that is overriding it:

html.w-mod-touch * {
background-attachment: scroll !important;
}

I understand this is good for mobile/small touchscreen devices, but in laptops I would like it to work normal.

Is there a way to override this with css?

The only other fix i can imagine is doing your solution, creating 2 fix divs with z indez -1 and -2 and make animations that plays with the z index while scrolling the other sections