jquery - Sticky footer with resizing image attached to footer -

i'm working on site utilizes 960 grid. @ bottom of site there's div between page content , footer contains image 100% width, resizes based on browser width. can check out demo here: http://redone.org/_dev/ski/menu2.html

the above works fine because content long. however, on pages content short, image , footer creep reveal undesired space between footer , bottom of browser (click "menu 1" in top nav or logo in link provided above). once on homepage, resize see issue below footer.

i'd utilize method similar css sticky footer method (cssstickyfooterdotcom).

i'm having difficult time solving due resizing of image (which desired). think might need utilize jquery update height/offset of footer, image height changes.

any appreciated.

p.s. sorry link weirdness above. i'm new forum , they'll let me post 1 link , no images visually explain issue.

something should trick. position body relative can tie footer bottom. same image. now, when window height exceeds body height, set body height window height footer stays @ 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 body height window height     else $('body').height('auto');  }).resize();