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 html, css and jquery but this is something I haven't done before!

I have a simple jsfiddle below but I need some help please!

Many thanks,

http://jsfiddle.net/def2y2yt/

Code snippet - more available using the jsfiddle link

.background {
    background-image: url(example.pjg);
    background-repeat: no-repeat;
    height: 600px;
    width: 100%;
}

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);

Answer 2

Or you could use this simple CSS property which I made a blog post about: http://nathanpeixoto.fr/blog/article8/web-un-one-page-presque-sans-javascript (French only, sorry).

Let's say this is your HTML:

<div class="background_container">

</div>
<style>
.background_container{
  background-image: url("XXX");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed; /* <= This one */
}
</style>