Sticky footer with resizing image attached to footer

I'm working on a site that utilizes the 960 grid. At the bottom of the site there's a div between the page content and the footer that contains an image with a 100% width, so it resizes based on browser width. You can check out a demo here: http://redone.org/_dev/ski/menu2.html

The above works fine because the content is long. However, on pages where the content is short, the image and the footer creep up to reveal undesired space between the footer and the bottom of the browser (click "MENU 1" in the top nav or the logo in the link provided above). Once on the homepage, resize to see issue below footer.

I'd like to utilize a method similar to the CSS Sticky Footer method (cssstickyfooterDOTcom).

I'm having a difficult time solving this due to the resizing of the image (which is desired). I think I might need to utilize jQuery to update the height/offset of the footer, as the ima开发者_StackOverflow中文版ge height changes.

Any help would be greatly appreciated.

P.S. Sorry about the link weirdness above. I'm new to this forum and they'll only let me post one link and no images to visually explain my issue.

---

Something like this should do the trick. Position the body relative so you can tie the footer to the bottom. Same with the image. Now, when the window height exceeds the body height, set the body height to the window height so the footer stays at the bottom.

CSS

body            {position: relative}
.footer         {position: absolute; bottom: 0px}
.imgbackground  {position: absolute; bottom: [footer height]}

JS

$(window).resize(function() {
    var winHeight = $(this).height();
    if(winHeght > $('body').height()) 
        $('body').height($(this).height()); // set the body height to the window height
    else $('body').height('auto'); 
}).resize();