Streaming live at 10am (PST)

Fixed Background scrolls on some browsers/os


#1

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.


#2

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/


#3

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?


#4

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.


#5

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


#6

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.


#7

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