title: jquery background image fade
body: <p>I am using jQuery to load ina background image that fills the page width / height. I have the following in the Head:</p>
  
  <pre class="lang-js prettyprint-override"><code>$(document).ready(function() {
      $('body').css({
      'background-image' : 'url({HTML_BASE}images/backgrounds/randoms/{BACK_IMG})',
          'background-repeat' : 'no-repeat',
          'background-position' : 'center top',
          'background-attachment': 'fixed',
          'background-size': '100% 100%',
      });
      $('#home-promo').innerfade({ 
          speed: 'slow', 
          timeout: 5000, 
          type: 'sequence', 
          containerheight: 'auto'
      });
  
      $('.model-search').innerfade({ 
          speed: 'slow', 
          timeout: 5000, 
          type: 'sequence', 
          containerheight: '393'
      });
  
  });
  </code></pre>
  
  <p></p>
  
  <p>This works fine and can be seen at <a href="http://projects.snowshtechnologies.com/golden_dragon/home/" rel="nofollow">http://projects.snowshtechnologies.com/golden_dragon/home/</a></p>
  
  <p>I want the BG image to fade in from the black background colour. I have looked at a few other threads on Stack that suggest its not possible as a body element defined in css, but in this scenario the BG image is being loaded in by jQuery. How would I go about adding a fade in to this code to bring the image in with a nice fadein?</p>