background-attachment

Updated / Published

background-attachmentプロパティは background-imageプロパティで背景画像を表示する場合に、その背景画像を表示域に対して固定表示することができます。通常、視点を移動すると背景画像も一緒に動いてしまうため、スクロールしながらだと文字が見難くなります。そこで、スクロールしても動かないように表示域に対して背景画像を固定させることで文字を見やすくする効果があります。

初期値
scroll
適用対象
すべての要素
継承
しない
メディア
visual

background-attachementプロパティの値

scroll
背景画像を固定しない(視点を移動すると背景画像も一緒に動く)
fixed
背景画像を表示域に対して固定する(視点を移動させても背景画像は動かない)

background-attachmentプロパティは背景画像を表示する background-imageプロパティとセットで使います。背景画像の設定がなければ、指定しても効果はありません。

background-attachmentプロパティの実装状況

IE
◯:Internet Explorer 6 では body要素以外に指定されていると表示域に対して固定されるのではなく、適用した要素に対して固定される不具合有り
Firefox
Opera
Chrome
Safari
iOS
Android

サンプル

body.fixed {
background-image : url(image.jpg) ;
background-repeat : repeat-y ;
background-attachment : fixed ;
}
body.scroll {
background-image : url(image.jpg) ;
background-repeat : repeat-y ;
background-attachment : scroll ;
}

この例では2つの文書をインラインフレームで埋め込み、それらの body要素をセレクタに一つは背景画像を固定したもの(fixed)、もう一つは固定していないもの(scroll)を用意しました。文字の読みやすさなどを見比べてください。

また、背景画像の設定でつまづくことの多い点として、表示域全体の中に大きな1枚の画像を背景画像としてスクロールしても同じ部分に表示させたいという場合には、background-attachmentプロパティを使うのではなく、"background-repeat : no-repeat ;" を指定した上で、background-positionプロパティにパーセンテージ値(%)、または "left | right | center | top | bottom" のいずれかのキーワードを指定するようにします。これによりスクロールしても背景画像の表示域内での位置は常に同じ部分に表示することができます。