CSS - Body's Background image rotation

To add background image rotation for your website, use the following jquery and css snippet:

CSS:

body {
transition: background 1s ease-in-out;
-webkit-transition: background 1s ease-in-out;
-moz-transition: background 1s ease-in-out;
-o-transition: background 1s ease-in-out;
}


.image-0 {
background:url('/images/bgmain.png');
}
.image-1 {
background:url('/images/bgmain1.png');
}
.image-2 {
background:url('/images/bgmain2.png');
}
.image-3 {
background:url('/images/bgmain3.png');
}


JS:
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script>
$(document).ready(function(){
var msecs = 5000;
var step = 0;
var limit = 2;


$("body").addClass("image-"+step);

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

});
</script>


This will change your body tag's background-image every 5 seconds (5000 milliseconds).