The background image that moves as you scroll down the page

Question

I continue to see sites with a background image that subtly moves as I scroll down. This is a really good effect, but I'm not sure how to do it? I am experienced with html, css and jquery, but this is something that I have not done before!

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

Thank you very much,

http://jsfiddle.net/def2y2yt/

Code snippet - more accessible via jsfiddle link

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

Answer 1

As TylerH said, it was called Parallax. Here you can see an example .

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 can use this simple CSS property that I did on my blog: http://nathanpeixoto.fr/blog/article8/web-un-one-page-presque-sans-javascript (Only in French, 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> 

Answer 3

The best library for this Stellarjs

Take a look at an example here

http://markdalgleish.com/projects/stellar.js/demos/backgrounds.html