So what is this Javascript scrolling background image thing about…?

Firstly, lets take a look at what we’re aiming to achieve. Check out the demos by clicking the link above. See how the background appears to change gradually? Next refresh the page a few times and see how the overlaid pattern also changes on each reload meaning that the effect is different every time you do so. You can achieve this effect very easily to add great visual interest to your web design, using just two images, a tiny bit of xhtml and some jquery magic…

Your final result may not look identical to the above, which is good – go get creative with it! Take the second example on the demo page. This gives the impression of a scrolling background on text, but of course it uses images to achieve it. However you may implement it, the principles remain the same:

• A continually scrollling background image using javascript
• A static overlay image with transparency
• Random starting positions for both images allowing for a unique appearance on every page load, again using javascript

The beauty of the effect that we are sharing here is that your web design can become truly unique for everyone, every time the page is loaded. The possibilities for its implementation are limitless, its up to you to make it your own. Increasing the height of the background spectrum for slower scrolling, or adding further decoration to the overlaid image are just two ways in which you can make the feel of the element completely different – a night sky? An underwater scene? Get the juices flowing…!

We’ll go over what you need in order to start building the element into your web design, before providing a step-by-step tutorial into how to put it all together.

Step 1: What you need in your toolbag…

This tutorial should be fairly easy to follow for all web designers / developers, however a working knowledge of XHTML & CSS is assumed throughout the tutorial, as well as experience in hooking up jquery and javascript to your web designs.
What you are going to need:

• A background image which will scroll. This is the coloured gradient with texture image in our example.
• An overlaid transparency image (this will be much taller than the viewable area).
• jQuery core library, .png fix for older versions of IE, javascript code to put the whole thing into motion.

Ok, there’s your pitch, now its up to you to hit it out the park… Lets get building!

Step 2: Structure & the images

The structure of the element is basically two divs positioned one atop the other. The outermost div will have position:relative; applied to it and will have the coloured gradient as its background image. The second div will be given position:absolute; in order to overlay it exactly where we want it. This second div will have the transparent .png image as its background image, however using javascript we will randomise the image’s vertical position, creating a different image on every page load. Both divs will have fixed width and height in the example.

Go ahead and create an image for each. The width of both should be the same as your container div (in the case of the example on the demo page, both images are 899px wide). The height of each image is completely up to you – the taller the gradient background, the slower the transition will be. The shorter, the faster and more obvious. For the overlaid .png, use whatever height you like. Obviously it should be at least as tall as the container div, and the height it is will dictate how much variation you will see in starting positions as there will be more of them! The images used in the example are provided in the .zip download.

Key Note! In the case of the gradient background image, the top and bottom of the image should seamlessly blend into one another. That is to say if you produced an image, printed it and then rolled it into a cylinder so that the top and bottom edges meet, the join between the two should be seamless, without a noticable step. A quick way of doing this in Photoshop is to copy the top portion of your gradient and paste at the bottom. Flip it vertically and blend into the rest of the image.

Please do bear in mind the size of your images in terms of page load – keep them as small as you can wherever possible – we wouldn’t advise using huge images for full width backgrounds on the body of your designs…

Step 3:The XHTML & CSS

Start off by downloading the latest copy of the jQuery core library. This will be the engine that powers our new element, but we will need a little more code to act as a steering wheel. We’ll come back to that later. Link the jquery and custom.js into your header in the usual way. Should you want to fix the ie5.5/6 transparency failing, you may also want to include a .png fix javascript file (Drew Diller’s Solution comes recommended).

  <head>
      <link rel=“stylesheet” type=“text/css” media=“screen” href=“css/style.css” />


      <script type=“text/javascript” src=“js/jquery-1.3.2.min.js”></script>
      <script type=“text/javascript” src=“js/custom.js”></script>
      <script type=“text/javascript” src=“js/jquery.pngfix.js”></script>
      <script>
        DD_belatedPNG.fix(’.png-fix’);
      </script>
  </head>

The xhtml is as straightforward as can be, using just two divs as outlined earlier. You can add any further content you want into the content of these divs. Adding content would also make the setup of the element semantically correct, not using empty divs, and using backgrounds as backgrounds! For illustrative purposes, this web design element example contains a further div with styled text within.

   <body>
      <div id=“box”>
         <div id=“overlay”>
             You can add further content on top of your design into these divs here.
         </div>
      </div>

   </body>

Apply the following CSS attributes to your two containing divs. Obviously you will need to set the width and height according to the images you have produced.

#container {
  background:url(../images/gradient.jpg);
  position:relative;
  width:899px;
  height:358px;
}
#overlay {
  position:absolute;
  top:0;
  left;0;
  width:899px;
  height:358px;
  background:url(../images/overlay.png);
}

Step 4: And finally, the javascript…

$(function() {
	// Define the height of your two background images.
           //The image to scroll
	var backgroundheight = 2000;
           //The image to overlay
	var backgroundheight_two = 1000;
	// Create a random offset for both images’ starting positions
        offset = Math.round(Math.floor(Math.random()* 2001));
        offset2 = Math.round(Math.floor(Math.random()* 1001)); 
	function scrollbackground() {
             //Ensure all bases are covered when defining the offset.
   		offset = (offset < 1) ? offset + (backgroundheight – 1) : offset – 1;
		// Put the background onto the div
   		$(’#container’).css(“background-position”, “50% “ + offset + “px”);
   		// Enable the function to loop when it reaches the end of the image
   		setTimeout(function() {
			scrollbackground();
			},100
		);
   	}
	// Initiate the scroll
	scrollbackground();
	// Use the offset defined earlier and apply it to the div.
   		$(’#overlay’).css(“background-position”, “50% “ + offset2 + “px”);

});

The above is the contents of custom.js – you will need to modify this slightly to fit your own needs. Firstly, the height of your two images should be entered in to the two ‘backgroundheight’ variables (in pixels). The first being the coloured gradient to be animated and the second, the overlaid static image.
Secondly, take the height of these two images and add 1. Insert these numbers to create a randomised starting position for both images in place of ‘2001’ and ‘1001’ above.
You can change the scrolling speed by altering the value ‘100’, though it seems 100 is optimum and altering this may not produce an animation that is quite as smooth.
Finally change ‘#content‘ and ‘#overlay‘ to the IDs of your containing divs if you have decided to change them.

Step 5: Have a cookie!

That’s it! Putting all these steps together will result in the effect you see on the demos page. Feel free to download the .zip below and play around with our version yourself, though please do not use our images or design as your own. The fun will come from creating something new and truly unique in your web design so take these tools and show the world what you’ve got!

If you’ve used this javascript scrolling background image effect in your web design, let us know! Leave a comment below – we’d love to see your implementations.

This tutorial was brought to you by Kudos Web Solutions – Web Design Manchester, UK.

« Back to Blog