Нижний градиент заходит слишком далеко, когда браузер сокращается

Question

Есть сайт на http://beta.es3inc.com, и вы заметите внизу, что у него есть градиент внизу, однако, когда пользователь сжимает свой браузер, вы заметите, что он скользит влево, что хорошо, простопока это не заходит слишком далеко.Он должен быть на одном уровне с минимальной шириной элементов div, когда он слишком сильно сжат, однако он будет продолжать толкать влево.Любые идеи о том, как я мог бы сделать это?

Answer 1

Я думаю, что лучший способ добиться того, что я делаю, - это JavaScript, поэтому я написал этот JQuery, на тот случай, если у кого-нибудь будет что-то подобное ...

/*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%");
 }
  });

Вам нужно будет настроить значения фона и минимальной ширины для фонового изображения и HTML-документа

Answer 2

Используйте CSS3 Градиент, как показано здесь:

http://css -tricks.com / примеры / CSS3Gradient /

и некоторые решения IE находятся здесь под вопросом:

Градиентные цвета в Internet Explorer