CSS

CSS – 背景のグラデーションをスクロールしても固定されるようにする

背景のグラデーションをスクロールしても固定させるにはbackground-attachment: fixed;が無難かと思います。下記のコードだけのプロパティで背景のグラデーションが固定されるので便利なプロパティです。

body{
    background-attachment:fixed;
    background:linear-gradient(#C9CCD3, #6f86d6);
}

よく失敗しがちな書き方でhtml, bodyに対してwidth: 100%; / height: 100%;に指定したらグラデーションが繰り返されるなんて失敗をしてましたが、上記のように設定すればコンテンツ（要素）が増えようが減ろうが背景のグラデーションは固定されるので安心です。

グラデーションが繰り返される悪い見本

html, body{
    width:100%;
    height:100%;
    background:linear-gradient(#C9CCD3, #6f86d6);
}

スクロールを必要としないページであればグラデーション適用されているように見えるが、要素が増えるとグラデーションの繰り返しが発生する悪い見本。

また、下記のコードは要素が増えればグラデーションが要素の高さ分伸びる悪い見本。

html, body{
    background:linear-gradient(#C9CCD3, #6f86d6);
}

background-attachmentが効かない場合

CMSやライブラリなどを使っているとほかのプロパティが優先されて効かない場合もあります。WordPressではbackground-attachment:fixed !important;としないと影響を受けるのでご注意ください。