Parallax

HTML

<header data-parallax="true" data-speed="5">
  Header
</header>

<main>
  <p>Content, content, content.</p>
  <p>Content, content, content.</p>
  <p>Content, content, content.</p>
</main>

CSS

html, body { height: 100%; }

body {
  background: #333;
  color: #fff;
}

header {
  background-attachment: fixed;
  background-color: #fff;
  background-image: url('http://lorempixel.com/720/480');
  background-position: 50% 0;
  background-repeat: no-repeat;
  background-size: cover;
  min-height: 100%;
  position: relative;
}

main {
  padding: 50px;
}

JavaScript

$('[data-parallax]').each(function(){
  var $this = $(this),
      $window = $(window);

  $window.scroll(function() {
    var y = -($window.scrollTop() / $this.data('speed')),
        background = '50% '+ y + 'px';

    $this.css('background-position', background);
  }); 
});