JavaScript/CSS3: Background Image Fade Test

Test to see that CSS3 Transitions fades the Background Image acurately

by sjmcpherson

HTML

<div id="bg"></div>

CSS

body{height:100%;}
#bg{
    
    width:100%;height:100px;background-color:#777;
    -webkit-transition: background 1s linear;
    -moz-transition: background 1s linear;
    -o-transition: background 1s linear;
    transition: background 1s linear;
}

JavaScript

var bg = document.getElementById("bg");
bg.style.height="500px";
bg.style.backgroundImage = "url('http://sjmcpherson.com/img/icoach-aux1.jpg')";

var move = setInterval(function() {	
    
bg.style.backgroundImage = "url('http://sjmcpherson.com/img/icoach-aux2.jpg')";
    
}, 5000);