回答:
次のCSSを適用します。
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
background-repeat: no-repeat;
background-attachment: fixed;
}編集：margin: 0;コメントごとに本文の宣言に追加されました（Martin）。
編集：background-attachment: fixed;コメントごとに本文の宣言に追加されました（Johe Green）。
background-repeatとbackground-attachment来た後、あなたのbackgroundルール。そうしないと、背景が繰り返される可能性があります。
以前の回答に関して、コンテンツをスクロールする必要がある場合、設定htmlとbodyto height: 100%は機能しないようです。fixed背景に追加することで問題が解決するようです-いいえneed for height: 100%;
例えば：
body {
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#cbccc8)) fixed;
}background-attachment: fixed
min-height:100%（互換性のあるブラウザで）使用します
私はパーティーに遅れていることはわかっていますが、ここではより確かな答えを示します。
あなたがする必要があるのは、min-height: 100%;ではなく使用することでheight: 100%;あり、グラデーションの背景は、コンテンツがスクロール可能であっても、繰り返すことなくビューポートの高さ全体を拡張します。
このような：
html {
min-height: 100%;
}
body {
background: linear-gradient(#ff7241, #ff4a1f);
}これがこの問題を解決するために私がしたことです...コンテンツ全体のグラデーションを表示してから、背景色（通常はグラデーションの最後の色）にフォールバックします。
html {
background: #cbccc8;
}
body {
background-repeat: no-repeat;
background: #cbccc8;
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#cbccc8));
background: -moz-linear-gradient(top, #fff, #cbccc8);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#cbccc8');
}<body>
<h1>Hello world!</h1>
</body>私はこれをFireFox 3.6、Safari 4、およびChromeでテストしましたが、何らかの理由でHTMLタグのスタイル設定をサポートしていないブラウザーの場合、背景色を本体に保持します。
設定html { height: 100%}はIEで大混乱をもたらす可能性があります。以下に例を示します（png）。しかし、あなたは何が素晴らしいのか知っていますか？<html>タグに背景を設定するだけです。
html {
-moz-linear-gradient(top, #fff, #000);
/* etc. */
}背景は下まで拡張され、奇妙なスクロール動作は発生しません。その他の修正はすべてスキップできます。そして、これは広くサポートされています。HTMLタグに背景を適用できないブラウザは見つかりませんでした。これは完全に有効なCSSであり、しばらくの間使用されています。:)
htmlますが、私の場合、ページの途中で止まります。追加background-attachment:fixedすると問題は解決します。これが複数のサイトで発生することを確認しましたが、原因を特定できませんでした。
html, body { height: 100%; }。
このページには多くの部分的な情報がありますが、完全ではありません。これが私がすることです：
<DIV id='container'>すべてのコンテンツを入れるを作成します次に例を示します。
html {
background: #a9e4f7; /* Old browsers */
background: -moz-linear-gradient(-45deg, #a9e4f7 0%, #0fb4e7 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#a9e4f7), color-stop(100%,#0fb4e7)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg, #a9e4f7 0%,#0fb4e7 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg, #a9e4f7 0%,#0fb4e7 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg, #a9e4f7 0%,#0fb4e7 100%); /* IE10+ */
background: linear-gradient(135deg, #a9e4f7 0%,#0fb4e7 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a9e4f7', endColorstr='#0fb4e7',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
background-attachment: fixed;
}
body {
margin-top: 0px;
margin-bottom: 0px;
}
/* OPTIONAL: div to store content. Many of these attributes should be changed to suit your needs */
#container
{
width: 800px;
margin: auto;
background-color: white;
border: 1px solid gray;
border-top: none;
border-bottom: none;
box-shadow: 3px 0px 20px #333;
padding: 10px;
}これは、さまざまなサイズとスクロールのニーズのあるページでIE、Chrome、Firefoxでテストされています。
汚れた; 多分あなたはちょうど最小高さを追加することができます：100％; html、およびbodyタグに？または、少なくともグラデーションの終了色であるデフォルトの背景色を設定します。
ここで答えを出すのに苦労しました。
本文のフルサイズのdivを修正し、負のz-indexを指定し、それにグラデーションをアタッチする方が効果的であることがわかりました。
<style>
.fixed-background {
position:fixed;
margin-left: auto;
margin-right: auto;
top: 0;
width: 100%;
height: 100%;
z-index: -1000;
background-position: top center;
background-size: cover;
background-repeat: no-repeat;
}
.blue-gradient-bg {
background: #134659; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(top, #134659 , #2b7692); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(bottom, #134659, #2b7692); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(top, #134659, #2b7692); /* For Firefox 3.6 to 15 */
background: linear-gradient(to bottom, #134659 , #2b7692); /* Standard syntax */
}
body{
margin: 0;
}
</style>
<body >
<div class="fixed-background blue-gradient-bg"></div>
</body>これが完全なサンプルです https://gist.github.com/morefromalan/8a4f6db5ce43b5240a6ddab611afdc55
私はこのCSSコードを使用しましたが、うまくいきました：
html {
height: 100%;
}
body {
background: #f6cb4a; /* Old browsers */
background: -moz-linear-gradient(top, #f2b600 0%, #f6cb4a 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f2b600), color-stop(100%,#f6cb4a)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #f2b600 0%,#f6cb4a 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #f2b600 0%,#f6cb4a 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #f2b600 0%,#f6cb4a 100%); /* IE10+ */
background: linear-gradient(top, #f2b600 0%,#f6cb4a 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2b600', endColorstr='#f6cb4a',GradientType=0 ); /* IE6-9 */
height: 100%;
background-repeat: no-repeat;
background-attachment: fixed;
width: 100%;
background-position: 0px 0px;
}関連情報は、http：//www.colorzilla.com/gradient-editor/で独自の素晴らしいグラデーションを作成できることです。
/ Sten
background: #13486d; /* for non-css3 browsers */
background-image: -webkit-gradient(linear, left top, left bottom, from(#9dc3c3), to(#13486d)); background: -moz-linear-gradient(top, #9dc3c3, #13486d);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#9dc3c3', endColorstr='#13486d');
background-repeat:no-repeat;これは私がやったことです：
html, body {
height:100%;
background: #014298 ;
}
body {
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5c9cf2), color-stop(100%,#014298));
background: -moz-linear-gradient(top, rgba(92,156,242,1) 0%, rgba(1,66,152,1) 100%);
background: -o-linear-gradient(top, #5c9cf2 0%,#014298 100%);
/*I added these codes*/
margin:0;
float:left;
position:relative;
width:100%;
}ボディを浮かす前に、上部に隙間があり、htmlの背景色が表示されていました。htmlのbgcolorを削除すると、下にスクロールするとグラデーションがカットされます。だから私は体を浮かせて、その位置を相対的に、幅を100％に設定しました。それはサファリ、クロム、firefox、オペラ、インターネットexplで動作しました。：P
皆さんはどう思いますか？
margin:0;、bodyまたはページの下部にギャップがあることもわかりました。