background image that moves when you scroll down the page

Question

I keep seeing websites with a background image that subtly moves when you scroll down. This is a really nice effect but I\'m not sure how to do this? I\'m am experienced with

Answer 1

Like TylerH said, it's called Parallax. You can see an example here.

Using JavaScript:

var velocity = 0.5;

function update(){ 
var pos = $(window).scrollTop(); 
$('.container').each(function() { 
    var $element = $(this);
    // subtract some from the height b/c of the padding
    var height = $element.height()-18;
    $(this).css('backgroundPosition', '50% ' + Math.round((height - pos) * velocity) +  'px'); 
   }); 
   };

 $(window).bind('scroll', update);