Fixed Background scrolls on some browsers/os

[Kameron2332 (Kameron)]

This is not specific to any projects.

Applying a fixed background image does not work when deployed. The fixed background works on IE, but on Chrome and Firefox it does not function at all.

[Siton_Systems (Ezra Siton)]

Hi. Can you add URL?

background-attachment property

The Fixed/Scroll is well supported (See her Browser compatibility table). This property is from CSS1

maybe clear cache

working example:
http://site-ae5a37.webflow.io/

[Kameron2332 (Kameron)]

I used your working example and it again only worked on IE. On Opera, Firefox, and chrome, your example does not work. I recorded a video showing showing, from left to right, IE, Firefox, and Chrome. This stays true on my other two windows laptops. I did clear the cache like you suggested, but it did not work. My Mac does not have any problems.

any thoughts?

[cyberdave (Dave S.)]

Hi @Kameron2332, can you please share the site read-only link: Share a read-only link | Webflow University and also published page url?

It is much easier to check that. There is an issue in some browser/mobile devices where background-attachment: fixed gets changed by the browser/os to background-attachment: scroll.

In general, applying the Fixed position to the element the background image is applied to as a styling attribute, will fix the issue.

[Kameron2332 (Kameron)]

Sure, this example is just from one of the stock templates.

http://kamerons-supercool-project.webflow.io

https://preview.webflow.com/preview/kamerons-supercool-project?preview=2c86e7fee4836d6da9b74244577125ac

Another vid Webflow Bug? - YouTube

[cyberdave (Dave S.)]

Hi there, thanks, this appears to be a background-attachment scroll issue similar to

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

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

That is an open issue at the moment with some browsers/os that is changing the background-attachment from Fixed to Scroll when the page is rendered.

Here btw is how the fixed background image looks for me on Chrome:

https://cl.ly/0L023t1m2E3t/Screen%20Recording%202018-01-05%20at%2008.25%20AM.mov

In the meantime, I would check the workaround provided in the post link above, which is to add a fixed DIV to the page, with a z-index of -1 and a page full cover.

In nearly all cases I have found, applying the fixed position to the html tag DIV instead of to the background-attachment style attribute will work better on mobiles/other browsers.