jQuery Rotating Page Background

Home » Blog » jQuery Rotating Page Background

jQuery Rotating Page Background

September 28th, 2010

I’ve seen several tutorials on how to create a rotating page background using jQuery, but to my surprise pretty much all of them had some major flaws. Here is a technique that I was able to implement very easily with 100% W3 validation.

Getting jQuery on your Page

Since we’ll be using jQuery to handle the background image animation, then we need to get jQuery into our page by adding the following code:

1

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>

Using the Google-hosted jQuery library will make for a faster load time for your page since there’s almost no chance that you’ll be able to serve this code up faster than Google’s servers.

Adding the Cycle plugin

Next, you’ll need to grab the code for the jQuery Cycle plugin which will be handling the actual animation functionality. Download the plugin here:

1

<script src="jquery.cycle.lite.min.js" type="text/javascript"></script>

The CSS & HTML Behind this Trickery

Basically, the concept here is, rather than using a regular page background and then continuously swapping out the background image attribute, Here’s what we do:

  1. Set up the area that will encompassed by the background image by creating divs that span as much of the page as we like. In this example we’re working with a fairly small page background area, but you can make the page background as big or as small is necessary.
  2. We have the Cycle plugin rotate those divs.
  3. Place the code for the actual page content beneath the code for the background divs.
  4. Use absolute positioning to pull the main content up so that it overlaps the rotating background divs.
  5. Use z-index to put the page content on top of the rotating background divs.

The Complete Code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>jQuery Rotating Background Image</title>
 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="jquery.cycle.lite.min.js" type="text/javascript"></script>
<script type="text/javascript">
 
$(document).ready(function(){
 
    $('#bg_containers').cycle({
		fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
	});
 
});
</script>
 
<style type="text/css">
 
body {padding:0; margin:0;}
#content {position:relative;width:800px; height:600px; margin:0; z-index:999; padding:270px 0 0;}
#text_box {background:#000; color:#ffffff; padding:10px; margin:0 auto; width:600px;}
 
/* classes to work with cycle plugin for BG images */
#bg_containers {width:800px; margin:0;}
#bg_containers div {width:800px; height:600px; margin:0 auto;}
#bg_containers .bg1 {background:url(1.jpg) no-repeat;}
#bg_containers .bg2 {background:url(2.jpg) no-repeat;}
#bg_containers .bg3 {background:url(3.jpg) no-repeat;}
</style>
 
</head> 
 
<body>
 
<div id="bg_containers">
	<div class="bg1"></div>
	<div class="bg2"></div>
	<div class="bg3"></div>
</div>
 
<div id="content"> 
 
	<div id="text_box">
    	        The background image behind this can be any size, so although it may not cover your entire screen in this case, you can make it cover as much or as little of the screen as you like. Just adjust the size of the #bg_containers, and of course, you can also have the background tile if you like as well.
        </div>
 
</div>
 
</body>
</html>

VIEW THE DEMO PAGE

Happy background image rotating!


Category : Blog & UI Development

14 Comments → “jQuery Rotating Page Background”


  1. Jon

    2 years ago

    Hi,

    Two questions.

    1) This plugin fades an image out while fading another in. An unfortunate side-effect of this is that in the middle of the fade, neither image is 100% opaque. If the site has a white background, we see the image slightly pan towards white before the 2nd image fades in. Is there any way around this? And make the 2nd image 100% opaque while the first image fades out on top of it?

    2) Is there any way to make a specific image last longer in a rotation than the other ones? (For instance, the last image in a rotation, before going back to image #1… any way to make that one last longer?)

    Thanks.


  2. Doron

    2 years ago

    Helo there Jon,

    I don’t actually know how either of the things you mention could be done, but really the animation is being handled completely by the jQuery Cycle plugin at http://jquery.malsup.com/cycle. I’m using the lite version, but if you download the full version of the plugin you probably have a lot more control.

    Wish I could be of more help!

    Doron


  3. Tyler

    2 years ago

    Using this to transition between several large fixed background images. Works great.


  4. Phill

    2 years ago

    Hi Doron,

    I was recently looking at “supersized” full image backgrounds but this solution is nicer thanks


  5. Doron

    2 years ago

    @Phill and Tyler: So glad that you found this helpful!


  6. Tahir

    2 years ago

    Hy Doron,

    Is there any way to make each background image a clickable link? I want to use this as an advertisement on my page and would need to link to external pages from each individual image.


  7. Doron

    2 years ago

    @Tahir I would try making the divs, such as bg1, bg2, etc anchor tags with display:block.


  8. Wayne Cox

    2 years ago

    Hi – thanks for the tutorial here! This is exactly what I’m looking for to implement on a WordPress site I’m working on.

    Can this be used in WP? If so, any help on how to do it?

    Thanks
    Wayne


  9. Doron

    2 years ago

    Of course this can be used in WordPress and implementing it can be done by modifying the page templates, since you modify page templates the same way you modify any regular web page. You can read more about WordPress page templates here: http://codex.wordpress.org/Pages.

    I hope that helps,

    Doron


  10. Barry

    2 years ago

    Hi.

    I’m incorporating large background images with information over the bg’s. It is possible to load the first image, animate the image to left, set a pause, then load the second image, third, four, and so on?

    Thanks,
    Barry


  11. Doron

    2 years ago

    You should be able to do this with the full version of the cycle plugin:
    http://jquery.malsup.com/cycle. There is an extensive selection of effects that you can do using the full version of the plugin.

    The version in my example is the lite version as I’m not doing any fancy effects, but the principle is exactly the same.


  12. Patrick Tang

    1 year ago

    Nice tutorial, you saved my day! :)


  13. Doron

    1 year ago

    @Patrick So glad I could help!


  14. Ro

    1 year ago

    Is there a way to pause the effect? Like if I wanted to build a pause and play button for it.


Getting Acquainted

Blogs I Like

Other Stuff I Like