Change the body background image with fade effect in jquery

Question

Hey i want to fade in a new background image let´s say every 60 seconds. I´ve set the background image like this:

body {background-image: url(background.jpg)         


        

Answer 1

Each 12 seconds an image is changed in presentacion container; it can be body tag

HTML

<div class="presentacion">
  <div class="mask"></div>
</div>

JS

delay(11000) + setTimeout(1000) = 12 sec transition duration = 300 + 300 = 600 msec

var imgArray = ['image-1', 'image-2', 'image-3'], index = 0;

(function changeBG(){
  // mask element only for transition
  $('.mask').delay(11000).animate({opacity:1}, 300, function(){
    index = (index + 1) % img_array.length;
    // in presentacion element change bg images
    $('.presentacion').css("background-image", "url('images/bg-"+imgArray[index]+".jpg')");
  }).animate({opacity: 0}, 300);
  setTimeout(changeBG, 1000);
})();

CSS

.presentacion {
  background-attachment: fixed;
  background-color: rgba(0, 0, 0, 0.5);
  background-image: url("images/image-1.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  -webkit-background-size: cover;
  background-size: cover;
  position: relative;
  width: 100%;
  z-index: 0;
  opacity: 1;
}
.mask {
  background-color: rgba(0,0,0,0);
  bottom: 0;
  left: 0;
  opacity: 0;
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  z-index: 10;
}

Answer 2

Re-UPDATE of the UPDATE:

Even NEWER Fiddle (without arguments.callee)

Changes:

• Javascript improvements
• CSS corrections (fits full page now)
• Added option for random sequence of images instead of sequential
• => Alternate version of NEWER Fiddle <= (if OP's img server is down)

---

BIG UPDATE

---

Took the meat of this code from this previous answer and added some bling (using my site background stash lol)

original fiddle :)

NEW Super Fiddle

Javascript:

$(document).ready(function () {
    var img_array = [1, 2, 3, 4, 5],
        newIndex = 0,
        index = 0,
        interval = 5000;
    (function changeBg() {

        //  --------------------------
        //  For random image rotation:
        //  --------------------------

            //  newIndex = Math.floor(Math.random() * 10) % img_array.length;
            //  index = (newIndex === index) ? newIndex -1 : newIndex;

        //  ------------------------------
        //  For sequential image rotation:
        //  ------------------------------

            index = (index + 1) % img_array.length;

        $('body').css('backgroundImage', function () {
            $('#fullPage').animate({
                backgroundColor: 'transparent'
            }, 1000, function () {
                setTimeout(function () {
                    $('#fullPage').animate({
                        backgroundColor: 'rgb(255,255,255)'
                    }, 1000);
                }, 3000);
            });
            return 'url(http://www.fleeceitout.com/images/field.' + img_array[index] + '.jpg)';
        });
        setTimeout(changeBg, interval);
    })();
});

CSS:

body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    position: relative;
    background-image: url(http://www.fleeceitout.com/images/field.2.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 0 0;
    background-attachment: fixed;
}
#fullPage {
    position: absolute;
    min-width: 100%;
    min-height: 100%;
    top: 0;
    left: 0;
    background-color: rgb(255, 255, 255);
}

Answer 3

https://github.com/srobbin/jquery-backstretch Backstretch is a simple jQuery plugin that allows you to add a dynamically-resized, slideshow-capable background image to any page or element. The image will stretch to fit the page/element, and will automatically resize as the window/element size changes.

Answer 4

jQuery(document).ready(function() {
var cnt=0, bg;
var $body = jQuery('body');
var arr = ['secondbg.jpg','sartulebis-archeva2.png'];

animate = function(){

}
var bgrotater = setInterval(function() {
    if (cnt==2) cnt=0;
    bg = 'url("http://yalcingroup.ge/test/wp-content/uploads/2015/08/' + arr[cnt] + '")';
    cnt++;
    jQuery('#background_cycler').animate({opacity:1}, 2000, function(){
        $body.css('background-image', bg);
    });


    jQuery('#background_cycler').animate({opacity:0}, 2000);
},10000);

});

Answer 5

Building on Deryck's answer...

If jQuery Color does not function properly (which it sometimes does), you can use fadeIn() and fadeOut() instead:

 $(document).ready(function () {
    var img_array = [1, 2, 3, 4, 5],
        newIndex = 0,
        index = 0,
        interval = 5000;
    (function changeBg() {

        //  --------------------------
        //  For random image rotation:
        //  --------------------------

            //  newIndex = Math.floor(Math.random() * 10) % img_array.length;
            //  index = (newIndex === index) ? newIndex -1 : newIndex;

        //  ------------------------------
        //  For sequential image rotation:
        //  ------------------------------

            index = (index + 1) % img_array.length;

        $('body').css('backgroundImage', function () {
            $('#fullPage').fadeOut(1000, function () {
                setTimeout(function () {
                    $('#fullPage').fadeIn(1000);
                }, 3000);
            });
            return 'url(http://www.fleeceitout.com/images/field.' + img_array[index] + '.jpg)';
        });
        setTimeout(changeBg, interval);
    })();
});

Answer 6

You can use the setInterval method and switch between classes defined in your CSS which have different background-images:

setInterval(function() {
    var $body = $('body');
    if($body.hasClass('background1'))
    {
        $body.removeClass('background1');
        $body.addClass('background2');
    }
    else {        
        $body.removeClass('background2');
        $body.addClass('background1');
    }
}, 1000);

Fiddle

This example uses an interval of 1000 which is one second. You can change this value for whatever period of time you're looking for.

UPDATE

Noticed your question asked for a fade so I added a CSS3 property on body:

body
{
    transition: background 0.5s linear;
}

The fiddle has been updated.