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

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: