Webdesign: Simple Parallax Scrolling using background images

Written by Hendrik Schuster on

Parallax scrolling is a huge web design trend but it is still not used too often on common web pages because it is powerful and wieldy. I want to describe and share my simple and unobtrusive solution for a parallax scrolling background-image attached to any element at a web page. Since I do not like to add a jQuery or even extra jQuery plugin for every simple task it is just based on a background image and a few lines of JavaScript. Hence, it is simple and lightweight as well as easily reusable.

What is parallax scrolling?

Parallax scrolling example
To keep things simple parallax scrolling is just about making multiple images move at a different speed to create the illusion of a depth or a 3D effect while you scroll down the page. Using this kind of effect is easy, but it can be overwhelmingly fast. You should use it, like any other effect, with caution to support and keep a good design and not weaken it.

Simple Parallax Scrolling using background-image and background-position


We are beginning with some basic HTML to provide a base for our test. Further we need some CSS to load our background image(s). In this example we are using a texture pattern. The code also includes the needed JavaScript script. To see a working example you can just download the provided archive and take a look at the three examples I wrote. Stacking multiple elements with parallax scrolling background-images can enable various effects without much effort. Check out the third example provided by the archive to get an impression what is possible!

Download: File Download (zip)

<head>

  <style>

    body {

      background-image: url(pattern.png);

      background-repeat: repeat;

      background-attachment: fixed;

      background-color: transparent;

    }

  </style>

</head>

<body id="parallax-bgi">

  <main>

    <!-- Your main content -->

  </main>



  <script>

    // self executing function after body loads

    ( function() {

       var speedModifier = 4;// parallax speed modifier

       window.onscroll = function() {

         document.getElementById("parallax-bgi").style.backgroundPosition = "0px " + ( window.pageYOffset / speedModifier ) + "px";

      }

   })();

  </script>

</body>