(CSS) Make a background image scroll slower than everything else

Question

here is is my CSS code for the body:

body {
  padding: 0;
  margin: 0;
  background-image: url(\"../images/background.jpg\");
  background-repeat: no-repeat;         


        

Answer 1

I also was looking for a modern and intuitive approach to adjusting my background scroll speed. You should try out the Simple Parallax Scrolling jQuery Plug-in, inspired by Spotify.com.

Once you have it attached to your project, along with a big image to play with, this is one of many ways to set it up.

The HTML | setup your containers and basic parallax attributes on element.

Some Content Above it
 

Some Content Below it

The jQuery | Here, you can play with additional parameters based on the docs

function parallaxjs() {
    $('.parallax-container').parallax({
        imageSrc: '//.jpg',
        naturalWidth: 1071, //your image width value
        naturalHeight: 500, //your image height value
        bleed: 0,
    });
}

(function () {
  parallaxjs();
})($);