background-attachmentについて
background-attachmentはページのどこかがスクロールできる際に意味を持つプロパティです。
値にfixed、local、scrollを持つことができます。初期値はscrollです。
ページ全体をスクロールさせた時と、個別ブロックの中をスクロールさせた時の動きを確認してみてください。
background-attachment:fixed
fixedは背景を固定します。固定するのですがページ自体をスクロールさせた時に上のブロックの中は動いているように見えると思います。これはブロックの位置が変わることで見える背景の位置も変わるためです。ちょっと面白い動きかもしれませんが違和感を覚える人もいるでしょう。
fixedはbodyに設定することが多いのかもしれません。bodyに設定するとそれはもう固定化されているのが分かります。ということでここをクリックするとbodyにfixedで背景が設定されます。
クリックしてページ全体をスクロールしてみてください。
スマホだと分かりずらいですが。
background-attachment:scroll
scrollはページ全体をスクロールさせた際に背景も一緒にスクロールします。ページ全体と一緒に動くので、上のようにブロックに対して設定するとブロックに対して張り付いているみたいな感じになります。
これもbodyに設定すると分かりやすいです。
ということでここをクリックしてページ全体をスクロールさせてみてください。
また初期値なのでbackground-attachmentを指定しない場合はこれと同様に動きます。
background-attachment:local
localではブロック内のスクロールバーと背景が連動します。スクロールするブロックに背景を設定する際はlocalを使うといいでしょう。
bodyに設定した場合はscrollと同じように動きます。動作を見たい方はここをクリックしてみてください。
以上background-attachmentの説明になります。