[解決済み】CSS3のグラデーション背景がbodyに設定されても伸びず、繰り返される？

2022-03-24 22:31:11

質問

の中のコンテンツは <body> の合計が300pxの高さになります。

の背景を設定すると <body> を使って -webkit-gradient または -moz-linear-gradient

ウィンドウを最大化すると（あるいは300px以上の高さにすると）、グラデーションはちょうど300pxの高さ（コンテンツの高さ）になり、ウィンドウの残りの部分を埋めるように繰り返されることになります。

webkitでもgeckoでも同じなので、これはバグではないと推測しています。

しかし、グラデーションを繰り返すのではなく、ウィンドウいっぱいに伸ばす方法はあるのでしょうか？

以下のCSSを適用してください。

html {
    height: 100%;
}
body {
    height: 100%;
    margin: 0;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

編集する 追加 margin: 0; をコメントごとにボディ宣言に追加します ( マーチン ).

編集する。 追加 background-attachment: fixed; をコメントごとにボディ宣言に追加します ( ジョエ・グリーン ).