background-attachment - スクロール時の背景画像の挙動
投稿日: / 更新日:
スタイルシートのbackground-attachmentは、画面をスクロールした時の背景画像の挙動を指定するプロパティです。
サンプルコード
下記は、スクロールした時に、背景画像を固定するためのサンプルコードです。
body {
background-image: url( "/background.png" ) ;
background-attachment: fixed ;
}デモ
スタイルシートでbackground-attachmentを指定したデモです。値にfixedを指定しているため、画面をスクロールしても背景画像が動かないのを確認して下さい。scrollを指定した時とどう違うのか、CSSを編集して確認してみましょう。なお、2016年2月現在、iPhoneだとfixedの値が動作しないようです。
値の指定
値の指定方法は主に下記の通りです。リンクをクリックすると、デモを確認できます。
| 項目 | 説明 |
|---|---|
| scroll | 初期値。スクロールに合わせて、背景画像も動く。 |
| fixed | スクロールをしても、背景画像が動かない。2016年2月現在、iPhoneでは正常に動作しない。 |
| local | ある要素内にスクロールがある場合、その要素内の背景画像がスクロールと一緒に動くようになる。簡単に言うと、要素内の背景画像にscrollを適用したい時に用いる。要素内の背景画像は、scrollを指定しても、スクロールと一緒に動いてくれない。そのため、localを指定する。localの場合とlocalじゃない場合、また、scrollの場合を比べて見て下さいね。 |
ブラウザのサポート
2016年7月現在の、ブラウザのサポート状況は次の通りです。
Chrome
●
4+
2010年3月
Firefox
●
25+
2013年10月
Safari
●
5+
2010年6月
Ie
●
9+
2011年3月
Edge
●
12+
2015年3月
Opera
●
10.5+
2010年3月
Safari(iOS)
▲
8+
2014年9月
Ie Mobile
●
10+
2012年6月
Chrome
▲
47+
2015年12月
Android
×
47+
時期不明
FF Mobile
●
44+
2016年1月
Opera Mobile
●
11+
2011年3月