<div id="background">
  
  <table cellpadding="0" cellspacing="0" border="0" id="bg-table" data-count="0">
    <tr>
      <td></td><td></td><td></td><td></td>
    </tr>
    <tr>
      <td></td><td></td><td></td><td></td>
    </tr>
    <tr>
      <td></td><td></td><td></td><td></td>
    </tr>
    <tr>
      <td></td><td></td><td></td><td></td>
    </tr>
  </table>
  
  <table cellpadding="0" cellspacing="0" border="0" id="bg-overlay">
    <tr>
      <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
    </tr>
  </table>
</div>

#background { background-image: url(http://lorempixel.com/output/city-q-c-640-480-7.jpg); display: block; width: 640px; height: 480px; position: relative;}
#bg-table { width: 640px; height: 480px;}
#bg-overlay { position: absolute; top: 0; left: 0; width: 640px; height: 480px;}
#bg-overlay td { border: 1px solid #000;}

/* Each cell is: 160 x 120 */

#bg-table td,
#bg-overlay td { height: 120px; width: 160px;}

#bg-table td { border: 1px solid #000; background: #333; transition: opacity 1s linear; opacity: 0;}

$(document).ready(function(){
  
  $('#bg-table td').each(function(i){
    
    var
        $o = $(this),
        $tr = $o.closest('tr'),
        col = $o.index(),
        row = $tr.index(),
        xCord = col*160, 
        yCord = row*120;
    
    $o.css({ backgroundPosition: -xCord+'px  '+(-yCord)+'px'});
    
  });
  (function slide(){
    var num = 0;
    (function animation(){
      var
          aniTime = 125,
          delay = 5000,
          $cells = $('#bg-table td'),
          numCells = $cells.length,
          i = 0,
          type = 0;
      
      if (num % 2 == 0) {
        type = 1;
        delay = 0;
        setTimeout(function(){changeImage();}, (aniTime*numCells));
      }
     
        (function animationLoop(){
          setTimeout(function(){
            $('#bg-table td').eq(i).css('opacity', type);
            i++;
            if(i < numCells) {
              animationLoop();
            }
          }, aniTime)
            })(); // Loop
      
      num++;
      setTimeout(function(){         
        animation();
      }, (aniTime*numCells)+delay);
      
      function changeImage(){
         var image = $('#background');
        
        if (image.hasClass('on')){
          image.removeClass('on');
          image.css('background-image', 'url(http://lorempixel.com/output/city-q-c-640-480-3.jpg)');
        }
        else {
        image.addClass('on');
          image.css('background-image', 'url(http://lorempixel.com/output/city-q-c-640-480-7.jpg)');
        }
        
      }
      
    })() // Change BG
})()
  
  
  
  
});