title: Fade In / Fade Out background images without white background
body: <p>I want to create a website with background images that change over time with a fade in/fade out effect, but I don't want to use the existing jQuery fade in/fade out effect because with when one image faded out, a white background appeared before other image faded in. I found a plugin named <a href="http://www.aaronvanderzwan.com/maximage/" rel="nofollow">Maximage</a> that suits my request but it uses img tags while I want to work with background-image CSS (I have a good reason for doing this). Does anyone know how to do this?</p>
  
  <p>Here's my HTML code:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div id="wrapper"&gt;
  //My contain here
  &lt;/div&gt;
  </code></pre>
  
  <p>Here's my JavaScript code so far:</p>
  
  <pre class="lang-js prettyprint-override"><code>//Auto change Background Image over time
  $(window).load(function() {
     var images = ['img/top/bg-1.jpg','img/top/bg-2.jpg','img/top/bg-3.jpg'];
      var i = 0;
  
      function changeBackground() {
          $('#wrapper').fadeOut(500, function(){
              $('#wrapper').css('background-image', function () {
              if (i &gt;= images.length) {
                      i = 0;
                  }
  
                  return 'url(' + images[i++] + ')';
              });
              $('#wrapper').fadeIn(500);
          })      
      }
      changeBackground();
      setInterval(changeBackground, 3000);
  });
  </code></pre>
  
  <p>Example: <a href="http://www.aaronvanderzwan.com/maximage/examples/basic.html" rel="nofollow">http://www.aaronvanderzwan.com/maximage/examples/basic.html</a></p>