How do I cycle the background-url of a div through several images?

Question

I've read through a few similar questions but can't find an answer to my specific problem.

My html is:

<div id="top-area">
  <div class="container">

    // Show title of website here

  </div>
</div>

My css is: #top-area { background-image: url("http://example.com/images/bg.jpg"); }

I would like to have the background of my div fade between up to 5 images.

I've tried defining a #top-area2 and #top-area3 in css and then doing this in jQuery:

$("#top-area").attr("id","top-area2");

But that doesn't give the effect I'm looking for. All the other examples I've found seem to point towards filling the div with hidden images and then revealing them one by one but this doesn't give me the background-image behaviour I'm looking for.

Is this possible? Thanks.

you can use CSS transitions for this http://stackoverflow.com/questions/9483364/css3-background-image-transition — Trey, May 12 '15 at 18:21
Thanks for the help. I found this plugin via the links you posted and think I'll go down this route: http://stackoverflow.com/a/17933411/2301894 — John T, May 13 '15 at 07:36

score 3 · Accepted Answer · edited May 12 '15 at 18:28

3

This will crossfade and cycle through an array of images:

var images = ['image1.jpg', 'image2.jpg', 'image3.jpg'],
    index  = 0,
    $top   = $('#top-area');

setInterval(function() {
   $top.animate({ opacity: 0 }, 500, function() {
     $top.css('background-image', 'url('+images[++index]+')');
     $top.animate({ opacity: 1 }, 500, function() {
       if(index === images.length) index = 0;
     });
   });
}, 6000);

Demo

edited May 12 '15 at 18:28

isherwood

58,414
16
114
157

answered May 12 '15 at 18:23

Rob M.

35,491
6
51
50

I added images to your fiddle to see it better. There's a delay while they load, unfortunately. – isherwood May 12 '15 at 18:27
@RobM. This works brilliantly apart from a couple of slight issues. Is there a way to make the next image take over from the last. Instead of the first image fading out to nothing and then the new one fading in? Also, is it possible to only do the animation if the next image has fully loaded? (big ask I know but thought I'd chance my arm in case you knew how to do this). The example you've posted is brilliant. Thanks :-) – John T May 12 '15 at 18:30
@JohnT No problem. You could try CSS animations like this: http://jsfiddle.net/h2fzvyr5/ or checkout this solution: https://dhirajkumarsingh.wordpress.com/2013/05/05/jquery-animate-full-page-multiple-background-image-fade-in-out-effect/ – Rob M. May 12 '15 at 18:36
@RobM.Thanks for the links. I'm guessing there's no way of fading in/out at the same time without putting the images inside the div and then selecting them? I'll work on detecting when the images have loaded. Thanks again for the prompt solution, I'll accept your answer :-) – John T May 12 '15 at 19:26

score 1 · Answer 2 · answered May 12 '15 at 18:20

I'd put the image URLs in an array:

var backgrounds = [
   '/img-one.jpg',
   '/img-two.jpg',
   ... 
];
var i = 0;

Then use an interval function to loop through them, updating the CSS:

setInterval(function() {
    $('#top-area').css('background-image', 'url(' + backgrounds[i] + ')');

    i++;

    if (i == backgrounds.length) {
        i = 0;
    }
}, 1000);

How do I cycle the background-url of a div through several images?

2 Answers2