The simplest full body parallax

Just a few lines of jQuery

by Sub Lines

HTML

<body data-type="background" data-speed="10">
    asdasdasd<br>
    asdasdasd<br>
    asdasdasd<br>
    asdasdasd<br>
    asdasdasd<br>
    asdasdasd<br>
    asdasdasd<br>
    <div class="text">
    test text test
    </div>
    asdasdasd<br>
    asdasdasd<br>
    asdasdasd<br>
    asdasdasd<br>
    asdasdasd<br>
    asdasdasd<br>
    asdasdasd<br>
    asdasdasd<br>
    asdasdasd<br>
</body>

CSS

body { 
    background: url(https://snap-photos.s3.amazonaws.com/img-thumbs/960w/CEDC5278FB.jpg) 50% 0 repeat fixed;    
    min-height: 8000px; 
    height: 1000px; 
    background-repeat: repeat;
    background-attachment: fixed;
    background-position: top;
  
}

.text{
  position: absolute;
  width: 500px;
  height: 250px;
  background: red;
  top: 0;
  background-position: top;
}

JavaScript

$(document).ready(function(){
var $window = $(window);
$('body').each(function(){
var $bgobj = $(this);
$(window).scroll(function() {
var yPos = -( ($window.scrollTop()) / $bgobj.data('speed')); // 320 is half of the image's height
var coords = '50% '+ yPos + 'px';
$bgobj.css({ backgroundPosition: coords });
});
});
});