Tom
Tom

Reputation: 1095

Negative Y value for background-position will not change

CSS

div {
    width: 300px;
    height: 500px;
    background-image: url(http://i.imgur.com/6TbTDVs.jpg);
    background-position: center top;
}

jQuery

$(window).scroll(function () {
    var scrolledY = $(window).scrollTop();

    var move = (scrolledY*0.2);

    $('div').css('background-position','center -'+move*-1+'px');
});

http://jsfiddle.net/rgbjoy/8GkSg/

Upvotes: 1

Views: 126

Answers (1)

p.s.w.g
p.s.w.g

Reputation: 149030

You're concatenating a - in front of the number and multiply it by -1, so it's trying to set the position to something like center --6px, which is not valid.

Try this:

var move = scrolledY * -0.2;
$('div').css('background-position','center '+move+'px');

Demonstration

Upvotes: 1

Related Questions