[Solved] How to fade animate background images (full size) [closed]

by


This is how I would do it with a couple of jQ lines:

var $bg = $('#bg'),
    $bgDIV = $('div', $bg), // Cache  your elements
    n = $bgDIV.length,      // count them (used to loop with % reminder)
    c = 0;                  //  counter

(function loopBG(){ 
  $bgDIV.eq(++c%n).hide().appendTo($bg).fadeTo(3000,1, loopBG);
}());   // start fade animation
*{margin:0; padding:0;}

body{
  width:100%;
  height:100%;
}

#bg{
  position:absolute;
  top:0;
  width:100%;
  height:100%;
}
#bg:after{
  content:"";
  position:absolute;
  top:0; left:0;
  z-index:1;
  width:100%;
  height:100%;
  background:url(//i.stack.imgur.com/D0AZ1.png);
}
#bg > div{
  position:absolute;
  top:0;
  width:100%;
  height:100%;
  background: none 50%;
  background-size: cover;
}
#bg > #one{   background-image: url('//i.stack.imgur.com/T3U9b.png'); }
#bg > #two{   background-image: url('//i.stack.imgur.com/UKeA2.png'); }
#bg > #three{ background-image: url('//i.stack.imgur.com/hrArW.png'); }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="bg">
    <div id="one"></div>
    <div id="two"></div>
    <div id="three"></div>
  </div>

1

solved How to fade animate background images (full size) [closed]