background-attachmentを使ってパララックス風のサイトを作成する

cssの「background-attachment」を使う事で画面をスクロールする際、指定した要素の背景画像をその位置に固定する事が出来、パララックス風のサイトに簡単に出来ます。

例

記述としては背景画像を固定したい要素に

background-attachment: fixed;

を記述するだけですが、
background関連のプロパティはショートハンドでまとめて書くようにしたいので、ショートハンドで覚えましょう。

ショートハンドの場合

background:#fff url() no-repeat center center/cover fixed;