[CSS] background-attachment

CSS の background-attachment は、 背景画像の固定やスクロールを設定するプロパティです。

background-imageと組み合わせてショートハンド(一括指定) background を利用できます。

background-attachment Code DEMO

デモをスクロールすると違いが確認できます。

他の値を持つ場合があります。詳細は以下をご確認下さい

background-attachment の詳細

利用できる値

スクロール (初期値)

local

要素の内容と連動してスクロールする

固定

scroll

要素の表示範囲に固定されスクロールしない。
画面を動かした場合は、要素と一緒に動く

固定

fixed

ビューポート(画面)に固定されスクロールしない。
画面を動かした場合も要素とは連動せず、固定したままとなる

background-attachment の複数指定

複数の背景画像を利用している場合
カンマ ‘ , ‘ で繋ぐことで、背景画像ごとに位置を指定する事ができます。
左(最初に書かれたもの)が一番上、右に行くほど下の画像に対応します。

background-image: url(img/sanple1.png), url(img/sanple2.png); 
background-attachment: scroll, local;

background-attachment 設定時の注意

• 未対応ブラウザに scroll 又は fixed を指定した場合、local が適用されます。
• 何も指定しない場合は、local(初期値) が適用されます。
• positionで位置指定がある場合を除き、local, scroll は要素の右上が起点となります。
• fixed は画面右上が起点です。位置指定はできません。

ブラウザ対応状況 (2020/07 現在)

local

• 〇
• 〇
• 〇
• 〇
• 〇
• 〇
• 〇
• 〇

scroll, fixed

• 〇
• 〇
• 〇
• 〇
• 〇
• 〇
• ×
• ×

※ Androidは、 AndroidBrowserのみ未対応 (Chrome,Firefoxは対応)

※より詳細な情報、最新情報、他バージョン対応などを確認されたい場合は Can I use 等のチェックサイトでお調べ下さいm(__)m