-
-
Save omgmog/7198844 to your computer and use it in GitHub Desktop.
$(function() { | |
var $el = $('.parallax-background'); | |
$(window).on('scroll', function () { | |
var scroll = $(document).scrollTop(); | |
$el.css({ | |
'background-position':'50% '+(-.4*scroll)+'px' | |
}); | |
}); | |
}); |
.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! :)
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.
Thanks you so much