change/fade full cover bkgd image

by jorgeluis

HTML

<div class="box">
    
</div>

CSS

.box {

      min-height: 100%;
  min-width: 1024px;
	
  /* Set up proportionate scaling */
  width: 100%;
  height: auto;
	
  /* Set up positioning */
  position: fixed;
  top: 0;
  left: 0;

    background: #111 url(http://placehold.it/500x500/671) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;

    -webkit-transition: background 0.5s cubic-bezier(0.1, 0.7, 0.1, 1);
    -moz-transition: background 0.5s cubic-bezier(0.1, 0.7, 0.1, 1);
    -o-transition: background 0.5s cubic-bezier(0.1, 0.7, 0.1, 1);
    transition: background 0.5s cubic-bezier(0.1, 0.7, 0.1, 1);

}

JavaScript

var imgs = [
    'http://placehold.it/500x500/369',
    'http://placehold.it/500x500/c00',
    'http://placehold.it/500x500/671'
],
i = 0,
maxRotations = 10;

for ( var j=0; j<= maxRotations; j++ ) {
    iterator();
}

function iterator() {  
    $('.box').css({
       'background-image': 'url(' + imgs[i] + ')'
    });

    if ( ++i < imgs.length ) {
        setTimeout(iterator, 5000);
    }
}