How can I rotate(or change) background image using CSS and Javascript

Question

I have taken a look through stackoverflow for hours now, and I have found a topic similar to what I am trying to achieve

JavaScript, How to change the background of

Answer 1

It sounds like you're trying to do a slide show. I highly recommend the JQuery Cycle Plugin or Cycle2. The Cycle2 Getting Started page has a nice incremental demo/tutorial.

Answer 2

You could try using different classes for each image, and then just swap out CSS classes in a given interval.

$(document).ready(function(){
  var seconds = 5000;
  var step = 0;
  var limit = 5;

  $("#Background").addClass("image-"+step);

  setInterval(function(){
    $("#Background").removeClass("image-"+step);
    step = (step > limit) ? 0 : step + 1;
    $("#Background").addClass("image-"+step);
  },seconds);
});

I'm not sure what kind of animation you are trying to do, but you could fadeOut and then fadeIn.

$(document).ready(function(){
  var seconds = 5000;
  var step = 0;
  var limit = 5;

  $("#Background").addClass("image-"+step).fadeIn(500);

  setInterval(function(){
    $("#Background").fadeOut(500,function(){
       $(this).removeClass("image-"+step);
       step = (step > limit) ? 0 : step + 1;
      $("#Background").addClass("image-"+step).fadeIn(500);
    });
  },seconds);
});

Answer 3

You can try swapping backgrounds like so:

Create CSS Class for each background and include transitions as part of the ruleset:

.background-1 {
 background: url('background-1.jpg');
 -webkit-transition: background 500ms linear;
 -moz-transition: background 500ms linear;
 -o-transition: background 500ms linear;
 -ms-transition: background 500ms linear;
 transition: background 500ms linear;

}

Add a script that will swap out the classes on a regular interval. (You would most likely wrap this script within $(document).ready) Since your transitioning backgrounds, you may not want the previous background immediately removed, so you can use a delay call to remove it after the transition would complete.

The following example would start the background switch every two seconds, and remove the previous background after 1 second. Since in my CSS, I declared that the transition should take .5 seconds, the new background is already there before the old one is removed:

setInterval(function() {
            if($('#background').hasClass('background-1')) {
                $('#background').addClass('background-2');
                setTimeout(function() {
                    $('#background').removeClass('background-1');
                }, 1000);
            }
            else if($('#background').hasClass('background-2')) {
                $('#background').addClass('background-1');
                setTimeout(function() {
                    $('#background').removeClass('background-2');
                }, 1000);
            }
}, 2000);

Note: The code that I've provided would require you to chain multiple if/else if statements together, there is probably a more efficient way to go about this.

I've done something similar (background colors instead of images) as a teaser for an upcoming project of mine, you can check it out here.

Update: Forgot to mention, make sure to declare one of the background classes in your Div element:

<div id="background" class="background-1"></div>