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

Answer 2

The best library for that is Stellarjs

Take a look at the example here

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

Answer 3

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>