Background Image Parallax POC

by JakobJingleheimer

CSS

body {
    background-position: 0% top, 100% top, center top;
    background-repeat: no-repeat;
    min-height: 500px;
}

JavaScript

bodyElm  = document.getElementsByTagName('body')[0];
window.onscroll = function(e) {
    var bodyHeight   = bodyElm.offsetHeight,
        scrollHeight = window.pageYOffset,
        scrolled   = (scrollHeight/bodyHeight)*10;
    bodyElm.style.backgroundPosition = (scrolled*-1)+'% top, '+(100+scrolled)+'% top, center top';
}