Parallax Header

HTML

<div class="header-bg">
  img.
</div>

<div class="page">
    <h1>Header</h1>
    <p>Rest of the page</p>
</div>

CSS

.header-bg {
  width: 100%;
  background-color: red;
  height: 70vh;
  background-size: cover!important;
  background-position: center center!important;
  background-repeat: no-repeat!important;
  position: relative;
}

.page{
    height:5000px;
    margin-top:100px;
}

h1{
    position:relative;
    top:0;
}

JavaScript

$(window).scroll(function () { 

   $('.header-bg').css({
      'top' : ($(this).scrollTop()/2)+"px"
   }); 

});