jquery - Scroll Background Relative to Page -

this first time on stack overflow, apologize if question bit verbose. have bit of quandary:

i want create parallax-scrolling effect background image (the height of larger of window) scrolls in direct relationship progress on page.

for example, when you've scrolled 25% of way down page, background image should have scrolled 25%. , when you've scrolled bottom of page (100%), background image should have scrolled bottom (100%).

with parallax effect, background image still scroll, wouldn't tile or need stretched. however, current code (show below), background does scroll @ slower rate content on page; reaches bottom of background , starts tiling.

i feel i'm missing mathematically. ideas?

here's jquery i'm using:

note: background image has height of 1200px

$(window).scroll(function() {     var x = $(this).scrolltop(); /* scroll position */     var y = $('html').height(); /* height of page */     var z = x / y; /* progress of current position on page */     $('html').css('background-position', '0% ' + (z * 1200) + 'px'); }); 

edit: figured out issue: don't start scrolling page until you're @ bottom of viewport, shouldn't start scrolling background image until point either. need new function. if r viewport height, function shouldn't move background image down first r pixels when scrolling down, , shouldn't move background image last r pixels when scrolling up. boy, turning real parallax-scrolling project. suggestions?

i think going for:

$(window).scroll(function() {   var scrollpos = $(this).scrolltop();   var pageheight = $(document).height() - $(this).height();   var progress = scrollpos / pageheight;   var backgroundoffset = (progress*100) + '%';   $("html").css("background-position", "0% " + backgroundoffset); }); 

see demo