【background-attachment】背景画像の固定

background-attachmentで背景画像を固定する

background-attachmentプロパティを使用すると、スクロールしても背景画像を動かなくするなど、背景画像の固定設定をすることができます。
値には下記のキーワードを指定できます。

• scroll
• fixed
• local

scroll

scrollは背景画像を要素に固定します。
要素に固定されるので、背景画像が要素と一緒にスクロールします。
この値が初期値です。

fixed

fixedは背景画像を表示領域に固定します。
表示領域に固定されるので、スクロールしても背景画像が動きません。
(下記の動画はbody要素の背景画像で実験しました。)

local

localは背景画像を要素内容に対して固定します。
要素内容がスクロールできる場合は、スクロールします。

背景画像を固定する設定のまとめ

今回は、背景画像の固定設定についてまとめました。
実際に試してみましたが、初期値のscrollが一番よく感じました。

みいと

Contact

興味を持ったものをいろいろと勉強しています。