背景には、画面全体に

Question

を適用されていない私は、いくつかのユーザー情報を求めて途中で.containerを持っている単純なページがあります。

：この下に

height: auto;    width: 300px; 
background: white;   margin-left: auto; 
margin-top: 10%;   margin-right: auto; 
padding: 50px 20px 20px; border-radius: 3px; 
-moz-border-radius: 3px; -webkit-border-radius: 3px; 

を私はposition: fixed;などを使用して定義されている3つの別々の部門を持っています

position: fixed;  z-index: -10; 
bottom:2%;   width: 100%; 
text-align: center; color: #eaeaea; 

ここで問題は、bodyタグにグラデーションを使用すると、コンテナが置かれているポイントの背景を単にカバーするということです。それはそれをやって停止することにした後：

body { 
background-color: #851207 no-repeat; 
background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(133, 18, 7)), to(rgb(83, 9, 3))) no-repeat; 
background-image: -webkit-linear-gradient(top, rgb(133, 18, 7), rgb(83, 9, 3)) no-repeat; 
background-image: -moz-linear-gradient(top, rgb(133, 18, 7), rgb(83, 9, 3)) no-repeat; 
background-image: -o-linear-gradient(top, rgb(133, 18, 7), rgb(83, 9, 3)) no-repeat; 
background-image: -ms-linear-gradient(top, rgb(133, 18, 7), rgb(83, 9, 3)) no-repeat; 
background-image: linear-gradient(top, rgb(133, 18, 7), rgb(83, 9, 3)) no-repeat; 
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#851207', EndColorStr='#530903') no-repeat; 
} 

私はここno-repeatを使用していますので、それ以外の場合は、間に顕著ラインの勾配を繰り返したため。私はまた別のものとそれを使用してグラデーションを試しましたdiv

何か提案がありますか？

Answer 1

あなたはhtml要素に幅/高さを提供する必要があります：// jsfiddle：私たちは、HTTPを参照する

html { 
    width: 100%; 
    height: 100%; 
} 

DEMO

Answer 2

Justeは身体に最小の高さを付けました。

body { 
    min-height: 100%; 
}