Update multiple background-position on scroll using jQuery?

Question

The parallax script doesn't update the css on $(window).scroll. It seems like you can not add multiple background-positions with jQuery?

Parallax scroll script:

<script>
var top_header = '';
$(document).ready(function(){
  top_header = $('header');
});
$(window).scroll(function () {
  var st = $(window).scrollTop();
  top_header.css({'background-position':"left "+(st*.5)+"px,"});
});
</script>

CSS:

header {background-image: url(../images/1.png), url(../images/2.png);
        background-repeat: no-repeat, no-repeat;
        background-position: left, right; 
        height: 550px; width: 100%}

I've tried to update the css like this:

$(window).scroll(function () {
  var st = $(window).scrollTop();
  top_header.css({'background-position':"left "+(st*.5)+"px,"+","+"right "+(st*.5)+"px,"});
});

This brakes the code and the header's background-position doesn't update on scroll as it should.

Any ideas appreciated.

Working example
Not working example

no, css doesn't support 'multiple background images', use 2 divs (display:inline-block) with a background each — andrew, Sep 20 '14 at 10:51
@andrew Of course it [does](http://css-tricks.com/stacking-order-of-multiple-backgrounds/). — dfsq, Sep 20 '14 at 10:52
css3 support multiple background images. please read docs: http://www.w3schools.com/css/css3_backgrounds.asp — aleha_84, Sep 20 '14 at 10:58

Gildas.Tambo · Accepted Answer · 2014-09-20T10:58:31.367

1

In css you set multiple background position like this:

 background-position: bottom right, left, right;

that means your code shall look some how like this

$(window).scroll(function () {
  var st = $(window).scrollTop();
  top_header.css({'background-position':"left "+(st*.5)+"px," + "right "+(st*.5)+"px;"});
});

edited Sep 20 '14 at 10:58

answered Sep 20 '14 at 10:53

Gildas.Tambo

22,173
7
50
78

This is exactly what I've described that I've already tried in the question. – Felix Sep 20 '14 at 11:08
No it isn't look closer you have `"px,"+","+"r` an extra comma in it and you are closing the background size with a comma not a semicolon. – Gildas.Tambo Sep 20 '14 at 11:35

Hamix · Answer 2 · 2014-09-20T11:25:56.163

For multiple background image you should use the following structure:

background-image:url(1), url(2), ...;
background-repeat: no-repeat(1), no-repeat(2) , ...;
background-size: 50% 50% (1),50% 50%(2) ,...;
background-position: left center(1), right center(2), ....;

OR

background: 
   url(1) 600px 10px no-repeat,  /* On top,    like z-index: 4; */
   url(2) 10px 10px no-repeat,   /*            like z-index: 3; */
   url(3);

Using JQuery

var top_header = '';
$(document).ready(function () {
    top_header = $('header');
});
$(window).scroll(function () {
    var st = $(window).scrollTop();
    top_header.css({
        'background-position': "left center," + "right " + (st * .5) + "px"
    });
});
$("#btnAdd").click(function () {
    var bg = $("header").css('background-image');
    $("header").css('background-image', bg + ', url("http://www.wired.com/wp-content/uploads/images_blogs/rawfile/2013/11/offset_RonnyRitschel_23712-1-660x660.jpg")');
});

In demo first click Add bg and scroll page to see result

DEMO

This is already working but the problem I have concerns the jQuery scroll function. It doesn't update the position on scroll. Please have a look at the two links in the question. — Felix, Sep 20 '14 at 11:12

Update multiple background-position on scroll using jQuery?

2 Answers2

DEMO