Need some help?

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

Web Hosting

We recommend Clook for web hosting. UK based, great service and great value.

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.

How do I make this work on a responsive design?

This is fairly straightforward. If we set the images as div background, and then cycle the divs, we can use background-size:cover to ensure the image fits as best as possible. This works fine in IE9+. Have a look at this demo to see it working.

Can I use this on my site?

Probably. See my policies on using code from this site.

Tags:

158 responses to “Cycling a background image with jQuery”

  1. maxwell says:

    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:

    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:

    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:

    Hi Donatas

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

  5. Steven says:

    Hi there

    How would I add this function to my wordpress website?

    I have added the CSS in my styles.css file. Added the HTML on the page I require, it is definitly seeing the images, however the problem comes when the transition is to take place. Where do I put the JS code?

    Thanks

  6. Simon says:

    Steven

    You should just be able to include the javascript code on the body of the page, wrapped in

  7. Steven says:

    Thanks for your reply, was it cut off slightly?

    I have enqueued jQuery and I have read that sometimes you need to put jQuery(function() instead of $(function()

    Is that right?

  8. Simon says:

    Yes, WordPress by default uses .noConflict(), which means you can’t use the $ variable, you need to use jQuery in full.

  9. Lord KM says:

    I am using this but i am using a pattern image that need to be repeated x & y as a background. tried removing 100% so far, need help!

  10. Simon says:

    To use this a background image you might try setting up multiple divs with the background images of your choice, and then fading the divs in and out instead of images.

  11. Anthony says:

    Is it possible to make the background fade on click from a thumbnail?

  12. Simon says:

    Anthony

    Yes. If you want to cycle one image on a click, replace the $window.load() code with:

    $(window).load(function(){
       $('#background_cycler').fadeIn(1500);//fade the background back in once all the images are loaded
    })
    
    $('#mybutton').click(function(){
       cycleImages();
    })
  13. Hancas says:

    any way to make image scroll and repeat through the page like css background emelent?

  14. I would like to be able to use this technique within a div (see my site; change the image) I can’t get this to work.
    Thanks

  15. Simon says:

    Hancas

    There isn’t an easy way to use an image like a css background element, no. The best suggestion I can make is to use a series of divs instead of images, set the background of the divs as required, and cycle the divs instead of images by amending the javascript.

    Peter

    Not quite sure what you mean. If you’re just trying to cycle an image within a div then does this help? I can’t see any code on your homepage that is attempting to cycle an image – you do however have jQuery loaded twice, which is likely to cause issues.

  16. TechnoSparks says:

    Hmm.
    I’m actually a newbie in JavaScript and not yet fully mastered JavaScript. I understood your script. I searched in google on how to fade change background upon onclick function. But the results were sad. I end up on your informational website.

    I need your help, if you don’t mind. I need a script that allows me to change background (not cycle) on a click of a button. Say there is button1, that button1 will give out background1.png . button2 give out background2.png . And the changes in the background is indeed fade.

    Can you help me? Your help is very much appreciated. And this info is great too! 🙂

  17. Simon says:

    You can to adapt this script by adding the necessary from the slideshow script with controls to do what you want. It should be straightforward to do.

  18. TechnoSparks says:

    Thank you, Simon 🙂
    I found what I want. I’ll comment on the tutorial if I have any problem. Again, your help is very much appreciated..

  19. Jack says:

    Hi Simon,

    I’ve implemented this (having translated it to CoffeeScript) on a site that I’m working on and I’m having issues with the crossfade effect in Chrome.

    Basically the fadeOut is quite erratic, sometimes it works, sometimes not. It often happens almost immediately, totally negating the crossfade effect. I’ve seen this reported in quite a few places for fadeOut effects but I can’t find any solutions. I wonder if you’ve encountered the problem or have any suggestions?

    The site is here:
    http://aqualisoffshore.com/

    Thanks.

  20. Simon says:

    I’m not really seeing an issue with your site.

    If you are loading large images, it’s better to kick off the cycler on $(window).load() rather than $(document).ready(), otherwise the images may still be loading when the animation starts, which can lead to jerky transitions before all the images have loaded. I have seen an issue with webkit where both a large number of images were loaded and cycled and the images were resized via css rather than shown at their actual size. If your problem persists, it might be worth a reducing the number of images and see if that improves the situation.

  21. Kevin says:

    Simon,

    Thank you for this. I’ve been using an implementation similar to this, but I’d like to be able to style the images at 100% height and width, without the image’s aspect ratio getting messed up (basically, the image centered beyond the edges of the window). Sort of like background-size:cover. I can’t get this to work whatever I try. Any thoughts?

    Thanks.

  22. Simon says:

    Instead of having tags holding the images, I suppose you could have a series of divs, each having a different image set as background, centred, and cycle these. That would effectively allow the background image to extend beyond the viewport when required, which I think is what you’re saying is the challenge.

  23. Kevin says:

    Thank you. This worked perfectly.

  24. Dipanjan Pradhan says:

    HI, I just want to add a prev and next button along with auto image cycling. Please suggest me the code to add previous and next button.

  25. Simon says:

    Have a look at this example for previous and next buttons. You can combine this with the basic slider here.

  26. Clint says:

    How can I get the background to align center top? I’ve used it for the body tag (background-position: center top;), but I cannot figure out how to get your code to align the way I want. I want the top to be at “0”, but it needs to center horizontally within the window without being fixed. I hope this makes sense… 🙂

  27. Clint says:

    Also, is there a way to randomize the image selection?

  28. Simon says:

    In the demo I’ve set #background_cycler to width:100%. If you don’t want to do this give it a width and set margin: 0 auto.
    You could randomise the next image selection by replacing this line:

    var $next = ($('#background_cycler .active').next().length > 0) ? $('#background_cycler .active').next() : $('#background_cycler img:first');

    with script to randomly select the image instead using .eq().

  29. Flick says:

    @Simon: First, thanks very much for this awesome tutorial 🙂 Have managed to implement this successfully on a WP theme (will have to write up about it sometime or make it into a plugin) but was wondering if you had any advice about a play/pause button? Love how the images autostart with the fading – occasionally some might want to pause it. Thanks in advance!

  30. Simon says:

    If you wanted to add controls, you can adapt this variant of the basic crossfade. The basic code is the same as you’ll see.

  31. Joe C says:

    Hi Simon,

    Thanks for your great code! I have one problem : I can’t center my “container” (the one with the overall content) div. I’m using the margin: 0, auto css method but it doesn’t seem to work. Any ideas?

    Thanks!

  32. Simon says:

    That sounds like just a css issue. The element to be centred needs a width, margin: 0 auto (no comma), and if you’re testing in IE, a valid doctype.

  33. stephen says:

    I like this tut i have something similar on my site now. I would like to use your code though instead. Only issue is that I need the image to cover the whole background like it does on my site. I tried adding the css “cover” like it is in my site but it does not work? I am still getting white space under the image. I like your code it seems to run much smoother than mine. can you help?

  34. Simon says:

    Stephen

    Using background-size:cover won’t work, because the image isn’t a background image. As discussed above, you can’t fade a background image. If your background image isn’t tall enough, then you could add some js to resize it dynamically to fit the viewport size. I’ve just opted to use a large image which will suffice for most devices.

  35. Kurt says:

    HI there, cool code Simon, but for some reason the transition doesnt work.

  36. Simon says:

    Hi Kurt

    Do you have jQuery loaded on your page?

  37. Kenneth says:

    Hi Simon,
    I used your method and tried to do the same effect; however, when I zoom in my website, the background will also be zoomed in, while your demo website will not. How can I fix this?

  38. Simon says:

    Hi Kenneth

    It’s kind of hard to tell what’s wrong without seeing your site. I’d suggest checking through the css first.

  39. @PusherBeats says:

    Hi,

    Thanks for the code. I see it working in my browser.. however the images are not displaying. Website: http://www.pusherbeats.com/ratsosa

  40. Simon says:

    The images display fine for me in Chrome.

  41. Manny says:

    Hi there, I have just attempted to copy and paste the code into jsfiddle and it does not seem to be working and I can not for the life of me figure out why.

    The transitions do not work and the images, are placed in a vertical line, instead of being stacked up on each other.

    Has any one tried testing within jsfiddle and if so, are they reaching the same conclusion?

  42. Simon says:

    Manny
    That sounds like you haven’t included the css necessary to stack the images on top of each other.

  43. Manny says:

    @Simon, I have copied and pasted the code exactly as have done so within Jsfiddle. However I have removed both the body tag and the script tag as they are not required with in js.

    Have you tried within Jsfiddle? If so are you getting the same results?

  44. Simon says:

    I haven’t tried jsfiddle no, but I can’t see why it wouldn’t work. Have you copied the css across as well?

  45. Manny says:

    @Simon
    The images are now layered upon each other, it was just that I did not have all the image links. However the fade in out animation does not work.

  46. Simon says:

    There’s obviously a problem in your code somewhere. Check for errors in your jQuery. This link may help.

  47. BuddyDude says:

    Simon,

    I know I’m a bit late on this thread, but how do I achieve cycling through the background OnClick as opposed to fade in or fade out?

  48. Simon says:

    Hi

    I’m not sure I understand precisely what you mean, but if you want to cycle the image on a click, then just leave the cycleImages() function unchanged, and replace the $window.load() code with something like:

    $('#yourElement').click(function(){
       cycleImages();
    });
  49. Loui says:

    Hi there,

    First off, thank you for this amazingly simple solution, it’s awesome.

    The problem I’m having is on page load the images all load at once and you can see them loading behind each other (which looks a bit messy). Could this be because I have it inside another div?

    Cheers,
    louis

  50. Simon says:

    The way to avoid that is to hide the images as the page loads using this snippet as shown:

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

    Then you can’t see the images as they are loading.

  51. Helmut says:

    Hi there,

    thank you, thank you, thank you…
    I’m experiencing just one little malfunction here. I presume the first image is supposed to fade in, coming from a white/blanco canvas. My problem is that the first image pops up entirely as soon as the window/page is loaded. There is no fade. The rest works pretty fine. Big up!

    Helmut

  52. Simon says:

    To do this the best way is to add a little javascript to hide #background_cycler before starting the fade rotation as shown:

    $('#background_cycler').hide();

    This will ensure that if js is disabled then the top background image will show.

  53. Christian says:

    Hello

    I’m wondering if there is a way to put this great code into the middle of a 3×3 table in such a way that the side’s autoadjust their height to the pictures used and also depending on the width of this table?

  54. Simon says:

    If you must have it in a table, then I think the best way to do what you want is to just use javascript to read the height and width of the containing cell, calculate the optimum image size from this, and then set #backgroun-cycler accordingly.

  55. Helmut says:

    Hi again,

    I am trying to expand the script with a ‘cycleBack’ function because I want to add a prev/next control. Basically, I replaced the words ‘next’ and ‘first’ with ‘prev’ and ‘last’ respectively. It seems to work, although it takes twice as long as expected to go from the last image to the second last image. Using a ‘prev’ button I have to click twice to do the same. Do you encounter this problem too?

    Helmut

  56. Simon says:

    Without seeing your page I can’t really say. If you have a look at this example for slideshow controls it may help.

  57. Mathieu says:

    That’s awesome thanks !
    There’s just one think I’d like to improve but I don’t know if it’s feasable (I nearly don’t know a thing in coding); I use this on several pages of my website, and when I browse another page, the cycler starts again from the beginning. Is there a way to keep it cycling without starting when I change page ? (go from home to contact on my website for example : http://essaimd.weebly.com/home.html)

  58. Simon says:

    Not impossible, but very messy I think. You could perhaps use javascript to attach the id of the current image as a query string to the URL when an internal link is clicked, and then use this to set the initial image on the new page. Personally I don’t think it’s worth it…

  59. Mathieu says:

    Yes I think so, I thought there was maybe some easy trick to do this, but I’ll leave as it is 😉

  60. Vikas says:

    Thanks a lot for such a nice article .One assistance i need from you is to add unique paragraph in each image just like you have added in your demo one but that is one only and is same in all the images whereas i need it unique in all .Please help me ..
    Thanks..

  61. Simon says:

    Hi Vikas
    What you need to do is put your images and text in a div and then cycle the div – like this example (not a background, but the same idea).

  62. Casey says:

    Hi there.. As bad as it sounds, I copied the whole source for your demo page and just changed the image names & locations, as well as the .js file just to even see If I could make it work. No matter how hard I try I just cannot get anything to happen in safari or firefox. Any thoughts?

  63. Simon says:

    Casey
    I think you are missing the javascript (included in my demo as /javascript/crossfade_images2.js).

  64. CodeNinja says:

    Hey man awesome tutorial, extremely helpful and really straightforward. However was wondering if it’d be possible to make the background image responsive, I noticed whenever i minimized the window to a certain size the background image doesn’t adjust to take up the space any thoughts. Thanks again for the awesome tutorial. 🙂

  65. Simon says:

    If you take a look at the link in the penultimate paragraph you’ll find the answer to this question.

  66. Simon Olney says:

    Thanks Simon, excellent stuff

  67. Rob says:

    On the site I am working on I found it stopped working in Safari after I added the responsive div. As per your demo page:
    http://www.simonbattersby.com/demos/background_cycler_demo_divs.htm
    When I checked your demo it doesn’t work in Safari either (or the native Android browser). Is there a way round this?

  68. Simon says:

    I suspect this might be due to lack of support for background-size, dependent on your browser version. I’ve tweaked the css on the demo, give it another try and let me know.

  69. Rob says:

    Thanks Simon. It works great in Safari now but not in the native Android browser. The image jumps in front of the text. It is not a show stopper for me however as it is not a good browser. I think they might be fazing it out in Android and replacing with Chrome so maybe it isn’t getting updated any more.

  70. Simon says:

    Hi Rob

    I can’t recreate this, my demo page works fine on Android.

  71. Rob says:

    I have just checked both yours and my versions on a big screen in ie, Firefox and Chrome (Safari ok) and it only covers up to 1600px then it repeats.
    I also have a bug in mine in ios Safari in portrait mode where I have similar repeats at the top and bottom but yours works fine so I must have a conflict somewhere. I was hoping if you can shed light on the 1600px issue it might help me solve the ios issue.
    Many thanks
    Rob

  72. Simon says:

    Have a another look at mine, I’ve tweaked the css which should remove the repeat.

  73. Rob says:

    OK will do. I actually just fixed mine in ios by making the image 1200px the same height as yours and 1920px to cover screens to that size. I will add in your css to hopefully make it work on all resolutions.
    Thanks for your help

  74. Rob says:

    There are still problems on my Galaxy note 8 (1280 x 800). In portrait it has bands top and bottom in all browsers and still fails completeley in the native “Internet” browser.

  75. Simon says:

    You’re on your own with the Galaxy as I don’t have access to one. The issue with this and with the native browser may well be lack of support for background-size:cover.

  76. Pedro says:

    Hi Simon, I’m very interested in randomizing the image selection. I have seen in your comments that it’s necessary to change this line:
    var $next = ($(‘#background_cycler .active’).next().length > 0) ? $(‘#background_cycler .active’).next() : $(‘#background_cycler img:first’);

    I have written the following line (the number 2 would be generated randomly):
    var $next = ($(‘#background_cycler .active’).eq(2);

    But it doesn’t work… It’s the first time I’m using .eq() so I would appreciate any help from you. I have searched through the internet but I can’t make it work. Thanks.

  77. Simon says:

    What you’re going to find there in your example is the third (since .eq() is zero-based) element within #background_cycler that has class active.
    There isn’t one. Try removing .active from that selector.

  78. Pedro says:

    Ok, I found the solution:
    var $next = $(‘#background_cycler’).find(“img”).eq(number);

    But how could I generate randomly the first image?

  79. Simon says:

    In exactly the same way, or use server side code to do it.

  80. Pedro says:

    Hello again Simon,

    There’s an interesting point in generating randomly the images. By the way, I still can’t generate the first one randomly because of the .active class (only one img has it in the html).

    The point of this message is: how would/could I check if the generated number is the same as the one previously generated? You can’t have a local variable to the function which checks that case and proceed like: while the numbers are the same, generate new number.

    This would be needed because if the new image is the same as the current one, the transition is not well done, there is a jump in the images.

    Thanks for your ideas Simon!

  81. Simon says:

    Remove the .active from your html and amend your selector to randomly pick the first image – but make sure the display is OK if a user has js disabled.
    To pick an image which isn’t the current active one use the .not() selector and pick just from the inactive images:

    $('#background_cycler img').not('active').eq(number);
  82. Mark S says:

    Hello Simon, thank you for the easy to understand code.
    I tried adding the effect to class’s since i got several rows with different bg’s, which worked like a charm. I then tried your other script so that it would continue to change like a loop, but i noticed that would only work on my sites first row! :/ Is there a way to make the bg continue on different places i have made it? in other words, make it loop everywhere, instead of only one place? Currently working on a website with a bootstrap template, which is linked here http://www.marktheart.dk/bootstraptest/index.html

    Also i got some problems making the classes bg cover in height… Dont know if you can help with that… You should notice it, if you play with the browser window a bit.

    Thanks anyway 🙂

  83. Simon says:

    If you want to use this for multiple cyclers you need to use .each(). Have a look at this example.
    I can’t see the issue with your background height.

  84. Mark S says:

    Nice! That solved the problem thx! 🙂

    The problem with the height only appears if u make the window very wide and the height very short, so it shouldnt really be a problem. Just bugged me a bit xD however if you make it really short in width and very tall, it somehow affects my footer position of my footer >.<

    Anyways thanks for very fast reply and the awesome code 🙂 Happy new year

  85. framp says:

    Hi Simon,

    you made my day. I created a private webpage for my friends and relevants to send them my Christmas greetings. Your code snippet helped me to create a slideshow which displayed my pictures I’ve taken on the local German Christmas markets.

    Thank you very much for sharing your code.

    Cu framp

  86. Yasser says:

    Hello, I have a problem, I have a class that contains the attribute background-size: cover and when applied to the images, they do not accept (nothing happens), this to make them responsive, You Might help me

  87. Simon says:

    Impossible to tell from a description I’m afraid. Try using Firebug or the code inspector in Chrome to see why css is not being applied to your elements.

  88. Richard says:

    Is it possible to have pagination / slide indicator dots on the slides, that change with the current slide, and can be clicked on to jump to the slide? Normal pagination dots.

  89. Simon says:

    Yes, you could do this easily enough. Have a look at some of the variants on the basic crossfade which should help you.

  90. Richard says:

    None of these examples have pagination dots. The closest is the “multiple cyclers with slideshow controls”, but the code for that seems to be quite a bit different to the code on this page. I would like to get some simple code to add in to the code on this page that I already have working well, without having to make too many changes!

  91. Simon says:

    This example highlights numbered page controls. Replace these with dots and remove the Next and Previous code and you’re there.

  92. Ueli says:

    Thank you, that is awesome. But could you give me a hint that the picture will be displayed over the whole screen without any scrollbars? In CSS I have for a static image the following entry: background: url(../pics/background/bg01.jpg) no-repeat center center fixed;

  93. Simon says:

    Impossible to tell for certain, but sounds like you might need to set overflow:hidden somewhere in your css. If you view the code on the demo that may help.

  94. Jim says:

    Hey Simon:

    Like others have said, great tutorial.

    For my own clarification, why, in “wrap” is the width effected, yet the height of the container, has to be changed in the “wrap_background”?

    Next up, a full page Pager. 🙂

  95. Simon says:

    Hi Jim
    I’m not sure I completely understand your question….but in the demo, #wrap_backgroundis set with position:absolute, so it needs width and height set explicitly to display properly.

  96. Sam says:

    Hi Simon,
    Thanks for this! It’s fantastic. I have a little glitch and I can’t seem to fix it. After the last image, it fades to the first image again for a second, then quickly switches back to the last image, then 7 seconds later goes back to the first image properly. But everytime, it switches for a split second then back on the last image before it cycles again properly. It is a wordpress template and I’ve changed $(function) with jQuery(function). Any tips? Thanks!

  97. Simon says:

    Hi Sam
    There’s either a problem with how you’re identifying the ‘first’ image in your javascript, or with your css. If you’re still stuck, post a link.

  98. Sam says:

    Thanks for getting back to me. I basically copied your code you have provided above. Correction to my previous post, after the 3rd picture it goes to the 2nd picture for a split second, then back to the 3rd, then does the proper cycle. Only changes I made to the css is a div overflow and width of the image. The site is: http://www.albertnicholas.ca

    Thanks!

  99. Simon says:

    Sam
    The issue you’re having is that your on the last img, jQuery('#background_cycler img.active').next().length is still greater than 0 because of your script element. Consequently it doesn’t flip back to the first img. You can see this if you view the html in Firebug when it’s running. To fix, either just move your script outside of #background_cycler, or target the img elements specifically in your js:

    var $next = (jQuery('#background_cycler img.active').next('img').length > 0) ? jQuery('#background_cycler .active').next('img') : jQuery('#background_cycler img:first');
  100. Sam says:

    That worked! I just moved the script outside of the div, that was something I didn’t even realize I had it in the div. Thanks Simon!

  101. Zach says:

    Hi there, love this script! I just have one question, I have 5 background images I’m loading but because they are big in file size they take a bit to load and then all load at once. I would ideally like it to only load the first img and show it right away and then load the others in the background. Is that possible?
    One more thing, it seems like no matter what, the rest of the page will be loaded and showing, and only when all of these images have loaded will it even appear at the top of my page. Trying to make it a bit more seamless so it appears sooner rather than the last thing. Thanks!

  102. Simon says:

    If you’re using big images, they’re going to take a while to load. On the demo page, and documented above, I hide all the images until they’re loaded and then fade them in using $(window).load(). Then you don’t see the images loading.

  103. Jim G. says:

    Hi:

    How would you change from a “fade” to a “slide”?
    Thanks

  104. Simon says:

    You can do this just by editing the cycleImages() function to transition with a slide, Have a look at this page for some similar ‘slide’ code.

  105. JoJo says:

    I really love this but wondered if it was possible to have other images fade at the same time. So that you could have thumbnails that change to be the background, a bit like this: http://www.gucci.com/uk/home

  106. Simon says:

    Yes, easy enough, you just need to add the fade of the images on the page into the cycleImages() function. The code for the simple crossfade here may be helpful.

  107. Mandy says:

    Is it possible to have a link attached to the background and have it change as the background image changes?
    Thanks

  108. Simon says:

    Yes, easiest way to do this it to wrap your images in a div , then put your text in the div as well, and fade the div rather than the image. This example shows the approach – you’ll need to tweak the css to match the background cycler example.

  109. Shaun says:

    Thank for the tutorial, im just battling to get the images to show, it only shows a black x or broken image icon. I have placed all the code in but simply cannot get it to work

  110. Simon says:

    The path to your images must be wrong for that to be happening. Only thing I can suggest is jut to check the images are where you think they are on the server.

  111. Cristi says:

    Hi there! Is it possible to add href to each image ?

  112. Simon says:

    Yes. Just wrap your img tags with anchors and then cycle them instead of the images.

  113. Cristi says:

    Thank you for your fast answer, but I must tell you I’m not very advanced. Can you tell me how to do this exactly ?

  114. Simon says:

    Cristi
    It’s pretty much as simple as I’ve written it. Wrap your img tags with a tags, then replace ‘img’ with ‘a’ in both your css and your js.

    Pete
    This example on the basic cycler should give you what you want.

  115. Cristi says:

    I’m trying to use it as background, not like a slideshow, and it shows over all website content..

  116. Simon says:

    Sounds like your css isn’t quite right – check you have z-index and positionset correctly.

  117. Hi Simon, i am trying to make a background cycler for my website. I made all the pages but cant get it to work!

    this is the html: http://i62.tinypic.com/2vnpea1.jpg
    this is the javascript: http://i59.tinypic.com/2h68y07.png
    and this is the css: http://i57.tinypic.com/1zpma11.png

    I dont know what is wrong, can you help me??

  118. Simon says:

    Images aren’t much help for debugging I’m afraid. Have a look at this guide to start debugging..

  119. Emmauel says:

    hi Simon…the code works perfectly in my mozilla developer edition but there seems to be a funny issue with my internet explorer rendering esp. with issues pertaining to my opacity and z-index

  120. Simon says:

    Impossible to guess what the issue might be really. Does my page have the same issues, and if so, in what version of IE? Otherwise check your doctype and css.

  121. Emmauel says:

    Thanks Simon :-)… its actually internet explorer 11.. actually realized your page worked just fine. So i revisited my code and solved the problem. Thank you

  122. I cant post my codes here???? It says i try to spam your blog??

  123. Simon says:

    Posting code into WordPress comment fields is challenging. If you need to send code use the Contact page.

  124. i have everything to work only i have no images showing up. I can see the transition, but no images!

  125. Simon says:

    Sounds like there’s a problem with your css, but impossible to tell without seeing the page. Use Firebug or Chrome Developer tools to see what css is being applied to your images.

  126. I solved everything it is working fine now, look at my website.
    Thanks for everything, you are a good help for everyone here.
    Keep up the good work!

  127. Emmauel says:

    hi simon, Please how can i create an effect to darken the background image slider with css as seen here https://www.campusjob.com

  128. Simon says:

    You’d need another div within #background_cycler, position:absolute, width:100%;height:100% with a higher z-index, and set a black background with an appropriate opacity.

  129. Emmauel says:

    hi simon…i tried it and it worked well..but there seems to be a little problem. The div darkens it for the first cycle of the slider then dark effect goes away for the second cycle of sliding and then the dark div works again. it keeps happening. So in summary its like dark effect to normal to dark to normal ….. So how can i get the dark effect to stay all on without the slider reverting to normal

  130. Simon says:

    Sounds like your js is fading out your extra ‘darkening’ div. Depending on how your html is set up you may need to tweak the js to stop this happening. You can see whether the div is being affected by using Firebug or similar.

  131. cao says:

    I am try to add text to each background images.
    I put the img and text in the same div but the hide function is not allowing the image or the text to be seen

  132. Simon says:

    You need to cycle the divs, not the img tags – have a look at this similar example.

  133. Emmauel says:

    Hi Simon, like you said earlier the JavaScript is indeed fading my my extra darkening div but how can i tweak the java-script to stop this. Cos the fade function after the cycle fades out the div with the #background cycler …

  134. Simon says:

    You need to set your javascript so it only fades the divs you want to fade. The issue (guessing since I don’t know your html) is that this code:

    var $next = ($('#background_cycler .active').next().length > 0) ? $('#background_cycler .active').next() : $('#background_cycler div:first{/highlight]');

    is finding your darkening div at the end of the first cycle. Numerous ways of fixing this, but a simple way would be to give all the fading divs a class of fade and amend your jQuery:

    var $next = ($('#background_cycler .active').next().length > 0) ? $('#background_cycler .active').next() : $('#background_cycler .fade:first{/highlight]');
  135. Amy says:

    I love this, but is it possible to have arrows and ‘dots’ to click through the images as well? A bit like adding the next/previous options on this page: http://www.simonbattersby.com/blog/jquery-endless-slider/ to the background image on this one?

  136. Simon says:

    Yes, you could adapt this code to fo what you want.

  137. Emmauel says:

    Helloo simon ..i tried using a javascript slider but its not working. it only works when i disable the jquery for the background slider. Is it possible that i can use the background slider with another javascript slider on the same webpage

  138. Simon says:

    That sounds like you might have jQuery loaded twice on your page, or possibly that you’re using two different javascript frameworks on one page (e.g. jQuery and MooTools). If the former, just load jQuery once, if the latter you will need to use noConflict().

  139. Tom says:

    Simon,

    Maybe you can help me…on this page: http://cppm-dev.umn.edu/discover-cppm, I have three tabs: Planning, Design, Construction. The designer requires a different background image for each page. Right now I have the correct background image for the Planning page. It is set via css as a page background via link to the image using the #full-page-wrapper ID.

    So I’m thinking that there must be a way to change the background image for each tab selection via JS.

    The classes for each tab:

    li.planning.active
    li.design.active
    li.construction.active

    I’m not skilled enough with JS to figure this out, but I think we could have this logic:

    if li.planning.actve
    then #full-page-wrapper background image A

    if li.design.active
    then #full-page-wrapper background image B

    if li.construction.active
    then #full-page-wrapper background image C

    What do you think? Can you provide a little help please?

    Thank you!

  140. Simon says:

    You’re on the right lines. Set different backgrounds in your css using classes, and then just change the class with js when you change the tabs.

  141. Igor says:

    Hi, I’m familiar with html and css, but I haven’t yet learned javascript… How and where do you implement the function?

  142. Simon says:

    The javascript can be placed either in the document head or before your closing body tag. If you have a look at the demo and view the source you can see how I’ve done it.

  143. Alexander says:

    Hi Simon I tried it everything using your code but it did not work

  144. Simon says:

    Check this to help you find the problem.

  145. Alexander says:

    Hi Simon I would like to post it here my code but it does not allow I need your little bit I tried everything even the listing of possible error that you have posted on this website but it does not work if you dont mind can I send it to your email address my html code ? but I dont have your email then…

  146. Simon says:

    Posting a link to your site is easiest.

  147. Steve says:

    Thank you for sharing this code Simon! The comments help refine and add. Really great way of sharing!

  148. Mark says:

    Hi there,

    Please see the url attached to my name. I have the background slider working, as I copied your responsive demo exactly. There seems to be a bug on the third cycle. I currently only have two slides. The first displays great, the second fades in perfect, but going from the second back to the first there is a weird jump. As far as I can see in dev tools is the Active class is not being added on the third cyrcle, but comes back on the fourth.

    Any ideas why this happened, even though I copied your demo? Thanks!

  149. Simon says:

    Move your script outside #background-cycler.

  150. Jerax says:

    excuse me sir, i did all the things you said above but my background seems to not fade at all.. its not even changing too.. pls help me in our project. thank you sir

  151. Jerax says:

    that is my code sir can u help me fix it.. thanks

  152. Simon says:

    Have you been through the debugging page I linked to? It looks not. You have jQuery loaded twice.

  153. Jerax says:

    sir i thinks, i have done all the things in the debiggung link but the page seems to do the same.. i loaded jquery once and tried to change the ‘$’ to ‘jQuery’.. i did all the necessary things but it doesnt seem to work or change anything at all..

  154. Simon says:

    If you can post a link to your current page (not send me the files) then I’ll take a quick look. Otherwise I’m guessing…

  155. Scott says:

    The code is working but goes crazy at the end of my img pile and then stops on the last image. Any thoughts as to why?

  156. Matt says:

    Hi There, I’m trying to use this in a website I am building but cannot get it to work locally. Any suggestions? Thankyou

  157. Simon says:

    Scott

    That sounds as if your javascript is not going back to the first image at the end of the cycle. This usually happens when your javascript selector doesn’t match your html.

    Matt

    Impossible to guess what the issue might be. Start with this page.

Useful? Interesting? Leave me a comment

I've yet to find a way of allowing code snippets to be pasted into Wordpress comments - so if you're trying to do this you'd be better off using the contact form.