Parallax Jquery .css function with .background-position-y

Question

i have a parallax that work with this function

var scaleBg = -$(window).scrollTop() / 3;
if (iOS === false) {
            $('.payoff').css('background-position-y', scaleBg - 150);
            $('.payoff2').css('background-position-y', scaleBg - 150);
            $('.social').css('background-position-y', scaleBg + 200);
        }

This not work on firefox becouse the background-position-y is not supported, how i can solve this for firefox?

I'd make it a 'normal' background-position and add the value for whatever has been set for the x-axis. — Shikkediel
– Shikkediel, Commented Apr 22, 2015 at 16:22

DavidT · Accepted Answer · 2015-04-22 16:30:23Z

1

You need to use the combined background-position property such as:

var scaleBg = -$(window).scrollTop() / 3;
if (iOS === false) {
    var payoffY = scaleBg - 150;
    var payoff2Y = scaleBg - 150;
    var socialY = scaleBg + 200;
    $('.payoff').css('background-position', '0px ' + payoffY + 'px');
    $('.payoff2').css('background-position', '0px ' + payoff2Y + 'px');
    $('.social').css('background-position', '0px ' + socialY + 'px');
}

Just for reference here the + is for concatenation not addition. The 0 is what ever you need the x position of your background to be.

This should be a more cross browser compatible way of assigning background-position.

edited Apr 22, 2015 at 16:30

answered Apr 22, 2015 at 16:24

DavidT

2,51123 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Nico Over a year ago

Thank you, now work. I was close to this solution, my mistake was to use scaleBg directly as y value, but did not work.

DavidT Over a year ago

Glad it worked. If you are happy with the solution please select this as your accepted answer.

Collectives™ on Stack Overflow

Parallax Jquery .css function with .background-position-y

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related