Load background image, scale to window size, then fade in
<p>I recently started a project were I wanted the background image to scale to the size of the window. I was able to make it work with the following code:</p>

<pre><code>&lt;script&gt;
$(window).load(function() {    

        var theWindow        = $(window),
            $bg              = $("#bg"),
            aspectRatio      = $bg.width() / $bg.height();

        function resizeBg() {

                if ( (theWindow.width() / theWindow.height()) &lt; aspectRatio ) {
                    $bg
                        .removeClass()
                        .addClass('bgheight');
                } else {
                    $bg
                        .removeClass()
                        .addClass('bgwidth');
                }

        }

        theWindow.resize(function() {
                resizeBg();
        }).trigger("resize");

});

&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;img src="images/ij_background.jpg" id="bg" alt=""&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>The problem is that the background image will load the full size image, and then scale to the window size, which is a little ugly. I want the image to load, scale, and then be displayed with a fade. I became a little stuck since I'm a little new to jQuery. Here is what I have <a href="http://www.injurytimeshort.lanewaypictures.com/" rel="nofollow">so far</a>.</p>
