Streaming live at 10am (PST)

Fixed Background scrolls on some browsers/os

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.

Hi. Can you add URL?

background-attachment property

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

maybe clear cache

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

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?

1 Like

Hi @Kameron2332, can you please share the site read-only link: https://university.webflow.com/article/how-do-i-share-my-sites-read-only-link 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.

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 https://www.youtube.com/watch?v=uCyY4JdQvMA&feature=youtu.be

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

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:

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.

1 Like

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