title: why my background-image transition is not working in firefox
body: <p>I am trying to change the background image of an div without having any effect on the content inside the div. i wrote following code to change the background-mage. I didn't understand why firefox doesn't respond to my css transition. is there any fix by which i can make it to work in ie and firefox.</p>
  
  <p>Html</p>
  
  <pre><code>&lt;body&gt;
      &lt;header&gt;
      &lt;/header&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>Css</p>
  
  <pre><code>body {
      margin: 0;
  }
  header {
      height: 665px;
      width: 100%;
      background-image: url('image0.jpg');
      -moz-transition: background-image 1s ease-in-out;
      -webkit-transition: background-image 1s ease-in-out;
      -ms-transition: background-image 1s ease-in-out;
      -o-transition: background-image 1s ease-in-out;
  }
  </code></pre>
  
  <p>Jquery</p>
  
  <pre><code> function preloadImages(array) {
  if (!preloadImages.list) {
      preloadImages.list = [];
   }
   for (var i = 0; i &lt; array.length; i++) {
      var img = new Image();
      img.src = array[i];
      preloadImages.list.push(img);
   }
   }
      var imageURLs = [
          "image0.jpg",
          "image1.jpg",
          "image2.jpg",
          "image3.jpg",
          "image4.jpg"
      ];
   preloadImages(imageURLs);
      var counterForBackgroundImage = -1;
   function changeBackgroundImage() {
  counterForBackgroundImage++;
  if (counterForBackgroundImage &gt; imageURLs.length-1)
      counterForBackgroundImage = 0;
  $('header').css('background-image', 'url(' + imageURLs[counterForBackgroundImage] + ')');
   setTimeout(function() {
      changeBackgroundImage();
   }, 5000);
   }
   changeBackgroundImage();
  </code></pre>