Need some help?

I'm usually available for small jobs or problem solving with jQuery or css. Just get in touch.

Buy me a drink

If you've found this useful, particularly for commercial projects, you might consider making a small donation.

Cycling a background image with jQuery

I had a question last week about whether my crossfade cycler could instead cycle a background image. Now, cycling the background image on an element I think would be very messy indeed, among other reasons because only one background image is widely supported.

However, by setting up a div to act as a background, and cycling the images within that div, I found the effect of cycling the background can be achieved quite simply. The code is virtually the same as the crossfade cycler.

I’m hiding the background div as soon as it’s created, and then fading it back in once all the images are loaded to avoid any jerky transitions. If the user has javascript disabled then just the initial image is displayed as a background – which is a “graceful degradation” I think.

I started my html by including the background div:

<body>

<div id="background_cycler" >

<script type="text/javascript">
$('#background_cycler').hide();//hide the background while the images load, ready to fade in later
</script>

<img class="active" src="/images/misc/backgrounds/background_1.jpg" alt=""/>
<img src="/images/misc/backgrounds/background_2.jpg" alt=""   />
<img src="/images/misc/backgrounds/background_3.jpg" alt=""  />
<img src="/images/misc/backgrounds/background_4.jpg" alt=""/>		
<img src="/images/misc/backgrounds/background_5.jpg" alt=""  />
</div>

rest of html...

Here’s the required css:

#background_cycler{padding:0;margin:0;width:100%;position:absolute;top:0;left:0;z-index:-1}
#background_cycler img{position:absolute;left:0;top:0;width:100%;z-index:1}
#background_cycler img.active{z-index:3}

Setting width:100% for the background div ensures it’ll take up the width of the page – but you could position it differently if needed. Here’s the javascript:

function cycleImages(){
      var $active = $('#background_cycler .active');
      var $next = ($('#background_cycler .active').next().length > 0) ? $('#background_cycler .active').next() : $('#background_cycler img:first');
      $next.css('z-index',2);//move the next image up the pile
	  $active.fadeOut(1500,function(){//fade out the top image
	  $active.css('z-index',1).show().removeClass('active');//reset the z-index and unhide the image
      $next.css('z-index',3).addClass('active');//make the next image the top one
      });
    }

    $(window).load(function(){
		$('#background_cycler').fadeIn(1500);//fade the background back in once all the images are loaded
		  // run every 7s
		  setInterval('cycleImages()', 7000);
    })

And that’s it really – you can see a demo here. I’ve tested in IE6, IE7, IE8, FF3, Safari 5, Opera 11 and Chrome, all on Windows 7.

4 responses to “Cycling a background image with jQuery”

  1. maxwell says:
    August 29, 2011 at 2:04 am

    one thing i noticed while using this in safari 5.1 ( 7534.50) is that does work but not as smooth as in firefox,ie or chrome.

    is this due to the this browser or can it be fixed somehow ?

    Thanks again for this wonderfull code.

  2. Simon says:
    September 2, 2011 at 1:39 pm

    Maxwell

    I’m currently testing using Safari 5.0.4 (on Win 7) and can’t see any appreciable difference between it and Firefox.
    Thanks for your comments.

  3. Donatas says:
    February 25, 2012 at 3:59 pm

    It is very useful – I really needed changing backgrounds. But I have a problem left – I need to either (preferably) have the images fixed screenwise when I scroll the page, or (alternatively) have the background images repeated when I scroll text. Is it possible? The third option would be to have the page backgrounds change together with the rotating images (so I could adjust the background to match the image)…

    Maybe you could suggest me how to implement any of the above?

  4. Simon says:
    February 25, 2012 at 6:24 pm

    Hi Donatas

    You can do this by adding position:fixed to #background_cycler instead of position:absolute.

Useful? Interesting? Leave me a comment