Simple parallax background scrolling with jQuery

parallax-scroll.js

$(function() {
    var $el = $('.parallax-background');
    $(window).on('scroll', function () {
        var scroll = $(document).scrollTop();
        $el.css({
            'background-position':'50% '+(-.4*scroll)+'px'
        });
    });
});

parallax-scroll.scss

.parallax-background {
    background-image: url('http://placekitten.com/1000/1000');
    background-position: 50% 0;
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    background-size: cover;

    -moz-transform: translate3d(0,0,0);
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

How to fix this issue happening with this in Internet Explorer where there is white space when you scroll?

worked well also for background elements/divs by editing the 50% for full values (pxs), great job!

Thank you! If you have missing background image at the bottom when scrolled all the way down, you can reverse the increment to resolve this issue. 'background-position':'center '+(+.4*scroll)+'px'

Thanks a lot!! Exactly what I was searching for!

Thank you so much, Simple Solution.