Parallax

parallax.html

<!--HTML-->
<div class="header">
  <div class="headerBg"></div>  
</div>


<!--STYLE-->
<style>
.headerBg {
    background-image: url(../img/headerBg.png);
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1;
    display: block;
    background-size: cover;
    background-position: center;
    transition: 0s linear;
    transition-property: background-position;
}  
</style>


<!--JS-->
<script>
//Scrollhandling
  $(window).scroll(function(e){
      //Parallax
      var scrolled = $(window).scrollTop();
      $('.headerBg').css('top',-(scrolled*0.5)+'px');
  });
</script>