CSSグラデーション背景スケーリングなし、1つの色で終わる

Question

固定の高さのCSSグラデーションの背景を1つの色にフェードインし、グラデーションを繰り返さないようにしようとしています。

Here's a codepen.

html { 
    height: 50px; 
    margin: 0; 
    padding: 0; 
    background: yellow; 
    background: -webkit-linear-gradient(orange, yellow); 
    background: -o-linear-gradient(orange, yellow); 
    background: -moz-linear-gradient(orange, yellow); 
    background: linear-gradient(orange, yellow); 
    background-repeat: no-repeat; 
} 

私は勾配が指定した高さで終了し、その後、バックグラウンドリピート一つの色を持っていると思います。 codepenではグラデーションの終わりを見ることができますが、それは白い背景です。背景を黄色にしたい。私はこれをCSSで完全にやりたいです（イメージを使わないで）。ありがとう。

Answer 1

あなたは、50pxにあなたのページ（すなわちhtml）の高さを設定します。このよう

。背景のサイズを制限するには、background-size CSSプロパティを使用します。

html { 
 
    background: yellow; 
 
} 
 

 
body { 
 
    height: 500px; 
 
    margin: 0; 
 
    padding: 0; 
 
    background: -webkit-linear-gradient(orange, yellow); 
 
    background: -o-linear-gradient(orange, yellow); 
 
    background: -moz-linear-gradient(orange, yellow); 
 
    background: linear-gradient(orange, yellow); 
 
    background-repeat: no-repeat; 
 
    background-size: 100% 50px; 
 
}

しかし、常に、むしろhtmlを使用するよりも体内divコンテナを使用することをお勧めします。ここでは一例です。

Answer 2

これは、HTMLタグのスタイル設定を50ピクセルに設定しているためです。あなたが望むものは<div id="wrapper"></div>のようなあなたの体の中のラッパーです。そしてそれは100vhの高さにスタイルを設定できます。すべてのあなたが得るように

html, body { 
    width: 100% 
    min-height: 100%; 
    height: 100%; 
    margin: 0; 
    padding: 0; 
} 

body { 
    background: yellow; 
} 

#wrapper { 
    width: 100%; 
    height: 100vh; 
    /* your background styles */ 
}