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);
}

Thanks you so much

Thanks! :)

Great Thanks

Man, you saved me couple of hours in searching and coding:) thank you!:)

Thanks!

Thanks God I found your solution. It's great. +1

better than full jquery plugins :)

Excellent!!! thanks!!!

Works fine thanks!!!

I love it !! it's simple and better than other full bg parallax plugins. Thank You !!

This is awesome :) better then a giant library I was gonna have to implement. Thanks! <3

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.