title: Loading Gif Page Does not load background images
body: <p>I have a gif that appears as my site is loading however the gif dissapers and the page appears after everything has loaded except the background images called via css.</p>
  
  <p>How could I have the gif fade away only after the background images have loaded.</p>
  
  <p>I am using this code for the loader:</p>
  
  <p>html:</p>
  
  <pre><code>&lt;html class="loading"&gt;
      &lt;!-- All the things --&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>css:</p>
  
  <pre><code>html {
      -webkit-transition: background-color 1s;
      transition: background-color 1s;
  }
  html, body {
      /* For the loading indicator to be vertically centered ensure */
      /* the html and body elements take up the full viewport */
      min-height: 100%;
  }
  html.loading {
      /* Replace #333 with the background-color of your choice */
      /* Replace loading.gif with the loading image of your choice */
      background: #333 url('loading.gif') no-repeat 50% 50%;
  
      /* Ensures that the transition only runs in one direction */
      -webkit-transition: background-color 0;
      transition: background-color 0;
  }
  body {
      -webkit-transition: opacity 1s ease-in;
      transition: opacity 1s ease-in;
  }
  html.loading body {
      /* Make the contents of the body opaque during loading */
      opacity: 0;
  
      /* Ensures that the transition only runs in one direction */
      -webkit-transition: opacity 0;
      transition: opacity 0;
  }
  </code></pre>
  
  <p>javascript</p>
  
  <pre><code>// IE10+
  document.getElementsByTagName( "html" )[0].classList.remove( "loading" );
  
  // All browsers
  document.getElementsByTagName( "html" )[0].className.replace( /loading/, "" );
  
  // Or with jQuery
  $( "html" ).removeClass( "loading" );
  </code></pre>
  
  <p>Thank you</p>