JQuery Parallax Background

HTML

<section> ... </section>

CSS

body {
  background:black url('img/bg-1.png') repeat-y 0 0;
  margin:0 0;
  padding:0 0;
}

section {
  background:transparent url('img/bg-2.png') repeat-y 0 0;
  padding:50px;
}

JQuery

$(function() {
    var $window = $(window),
        $body = $('body'),
        $section = $('section');
    $window.on("scroll", function() {
        var distance = $(this).scrollTop();
        $body.css('background-position', '0 -' + distance + 'px');
        $section.css('background-position', '0 -' + distance * 2 + 'px');
    });
});

Lihat Demo

Pembaharuan: Versi JavaScript Murni

Menggunakan pageYOffset sebagai pengganti $(window).scrollTop():

(function() {
    var bgLayer = document.getElementsByTagName('div');
    window.onscroll = function() {
        var top = pageYOffset;
        document.body.style.backgroundPosition = '0 ' + (top*2) + 'px';
        bgLayer[0].style.backgroundPosition = '0 ' + (top*0.5) + 'px';
        bgLayer[1].style.backgroundPosition = '0 ' + (top*1.5) + 'px';
        // Dan seterusnya...
    };
})();

Lihat Demo