Bottom gradient going in too far when browser is shrunk

There is a site at http://beta.es3inc.com and you will notice at the bottom that it has a gradient at the bottom, however when the user shrinks his browser you will notic开发者_JS百科e it sliding to the left, which is fine just as long as it doesn't go in too far. It should be flush with the minimum width of the divs above it when shrunk too far, however it will keep pushing left. Any ideas on how I would be able to do this?

Use CSS3 Gradient as seen here:

http://css-tricks.com/examples/CSS3Gradient/

and some IE solutions are in question here:

Gradient colors in Internet Explorer

I think the best way to achieve what I am doing is through JavaScript so I wrote this JQuery one, just in case anyone has anything like it...

/*Script is designed to keep a gradient from being cropped by the browser
this script requires JQuery, tested on version 1.6 free with no waranty GPL licence.

SETUP-Place what you need here:...*/
var whenreaches = 1100; //When resize reaches this point do it to provide a smooth  transition
var minwidth = 500; //This will be the min width in px, if it reachs this the Javascript will switch the CSS

//Resize event will trigger this JS...
$(window).resize(function(){
 var current_width = $(window).width();
 var current_bg = $('body').css('background-position');
 if(current_width <= whenreaches){
 //We need to change it to scroll, so the effect is not lost
    $('body').css('background-attachment','scroll');
    $('body').css('background-position',minwidth+"px 0%");
 }
 //Make sure it can return too
 if(current_width >= whenreaches){
    $('body').css('background-attachment','fixed');
    $('body').css('background-position',"100% 100%");
 }
  });

You will have to tweak whenreaches and minwidth values to your background image and HTML document