Search code examples
cssfirefoxparallaxskrollrbackground-position

Skrollr.js Plugin Background Position Y Not Parallaxing

This is a continuation of this question.

I am using Skrollr.js for parallax, which I have created a simple fiddle to show my markup and js. The fiddle is here and the full page result is here.

I cannot figure out why I can all of the background images parallaxing on Chrome and Safari but when it comes to Firefox, no luck. Can anyone help me understand why these fiddles don't work but this does work, which uses the same code.

Is it that...

background-position-y: 100%;

Doesn't animate in Firefox or something? If not then why does the demo that I linked work no trouble?...

Solution

  • Indeed, there is a problem with Firefox and background-position-y. You just need to modify your code to so that it has the x and y value. Something like:

    background-position: 0% 100%;

    Where 0% is the x value and 100% is the y value.