ブラウザが収縮しすぎるとボトムグラディエントが発生する

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/examples/CSS3Gradient/

といくつかのIEのソリューションは、ここで問題にしている：

Gradient colors in Internet Explorer