How to speed up the scroll speed of background image?

Question

I want to achieve a simple parallax effect where the background image has to scroll faster than the elements above it. How can I achieve this with JQuery or using javascript?

Answer 1

Get the current position of page scroll and multiply it by your favorite rate. Then change the position of background to result number:

 $(document).ready(function(){ var yOffset; $(window).scroll(function(){ yOffset=$(window).scrollTop()*10; $("body").css('background-position', '0px '+-yOffset+'px'); }) }) 

 body{ background:url('https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png'); height:4000px} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="test"> &nbsp; </div>