☰

ボディに設定された CSS3 グラデーション背景は伸縮せず、繰り返されますか? 質問する

tag-icon • tag-icon css gradient
ボディに設定された CSS3 グラデーション背景は伸縮せず、繰り返されますか? 質問する

内部のコンテンツ<body>の合計の高さは 300 ピクセルだとします。

<body>使用中の背景を設定すると-webkit-gradient、-moz-linear-gradient

次に、ウィンドウを最大化します (または、高さを 300 ピクセルより高くします)。グラデーションの高さはちょうど 300 ピクセル (コンテンツの高さ) になり、これを繰り返してウィンドウの残りの部分を埋めます。

これは webkit と gecko の両方で同じなので、バグではないと思います。

しかし、グラデーションを繰り返すのではなく、ウィンドウ全体に広げる方法はあるのでしょうか?

ベストアンサー1

次の CSS を適用します。

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

編集:margin: 0;コメントごとに本文の宣言に追加しました(マーティン）。

編集:background-attachment: fixed;コメントごとに本文の宣言に追加しました(ジョー・グリーン）。

おすすめ記事