title: How to fade in background image?
body: <p>I want an image to pre-load and fade in when ready. I have the pre-loader working but can't get the fade effect.</p>
  
  <p>What I tried:</p>
  
  <p>1: CSS3 transitions - doesn't work for background images.</p>
  
  <p>2: jQuery fadeIn - only works on HTML elements and not CSS background image. Trying to fade an element results in all elements within also fading.</p>
  
  <p>jQuery:</p>
  
  <pre><code>$(bg).imagesLoaded({
      done: function($images){
          $('body').css('background-image', "url('" + $images[0].src + "')");
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>body{
  background-repeat:no-repeat;
  background-attachment:fixed;
  background-size:cover;
  }
  </code></pre>
  
  <p>I understand that there may not be a slick way of achieving this but I have seen it done here for example so there must be a way: <a href="http://movies.io/m/4I/en" rel="nofollow">http://movies.io/m/4I/en</a>.</p>