【CSS】背景を固定する方法

というわけで今回はスクロールしても背景が固定される方法をご紹介します。
まずは下記の見本をご覧ください。

見本

See the Pen 背景を固定する方法（CSS ブログ掲載用） by そす (@Sosgoyo) on CodePen.

↑Result画面が大きすぎて見にくいので0.25xを選択してご覧ください。

スクロールしても背景画像が固定される方法

background-attachment: fixed ;

background-attachmentはCSSのプロパティで、背景画像の位置を固定するか、一緒にスクロールするかを設定できます。
今回やりたいのは背景画像の固定ですね！

背景画像の固定にはfixed、背景画像を一緒にスクロールさせたい時はscrollを使用します。

見本の解説

ここからは上記に添付した見本の解説を少ししたいと思います。

メインビジュアルに桜の背景画像を配置しています。幅・高さ共に画面幅いっぱいに表示する
今どき？なメインビジュアルです。

今回はスクロールしても常に背景画像に桜を表示するようにしました。
スクロールごとに違う背景にしたければコンテンツとコンテンツの間の背景画像を
別画像にして、それぞれにbackground-attachment: fixed ;　をつけてください。

まとめ

というわけで今回はスクロールしても背景が固定される方法について解説しました。
今回使用しているbackgroundのプロパティはとても多くの使い方があるので今後も
まとめていきたいと思います。

是非、コーディングにお役立てください～。