Multi-Background Images scrolling

I believe this effect can be created within the CSS, but I am not sure there might be some Javascript behind it. But basically I am trying to duplicate the background effect as seen on meandmyaaa.com. As you scroll down the white circles behind the main im开发者_Python百科age seem to scroll at different rates, how can this be achieved?

There are actually 3 backgrounds:

• .contentContainer holds the main background image and scrolls with the page as any background normally would
• .bgCircle1 holds a background image of one set of circles
• .bgCircle2 holds a background image of another set of circles

When you scroll the screen, .contentContainer scrolls normally whereas the scroll amount for .bgCircle1 and .bgCircle2 are calculated using this function which is bound to the scroll event of the window:

var offset = jQuery(window).scrollTop();
$('.bgCircle1').css({
  'backgroundPosition': 'center -' + (offset / px_scroll_amt) + 'px'
});
if (xhr_support) {
  $(".bgCircle2").css({
    'backgroundPosition': 'center -' + (offset / (px_scroll_amt / 3)) + 'px'
  });
}

It basically checks how far the window has scrolled and moves each of the backgrounds a different amounts. The background sizes are different heights to accommodate for this.