background-attachmentプロパティは background-imageプロパティで背景画像を表示する場合に、その背景画像を表示域に対して固定表示することができます。通常、視点を移動すると背景画像も一緒に動いてしまうため、スクロールしながらだと文字が見づらくなります。そこで、スクロールしても動かないように表示域に対して背景画像を固定させることで文字を見やすくする効果があります。
fixedscrollinheritscrollbackground-attachmentプロパティは背景画像が設定されている全ての要素に対して指定することができまずが、その働きは要素自体を固定するものではなく、表示域に対して背景を固定するものであることに注意してください。Windows版Internet Explorer 6, Macintosh版Internet Explorer 5 では body要素以外に background-attachmentプロパティが指定されていると表示域に対して固定されるのではなく、適用した要素に対して固定が行われる不具合が起こります(この不具合は Windows版Internet Explorer 7 においては改善されています)。
scrollfixedbackground-attachmentプロパティは背景画像を表示する background-imageプロパティとセットで使います。背景画像の設定がなければ、指定しても効果はありません。
body要素以外に指定されていると表示域に対して固定されるのではなく、適用した要素に対して固定が行われる。Windows版Internet Explorer 7 にて改善済み。body要素以外に指定されていると表示域に対して固定されるのではなく、適用した要素に対して固定が行われる。
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つの文書をインラインフレームで埋め込み、(IE では body要素以外は正常に動作しないため)それらの body要素をセレクタに一つは背景画像を固定したもの(fixed)、もう一つは固定していないもの(scroll)を用意しました。文字の読みやすさなどを見比べてください。
また、背景画像の設定でつまづくことの多い点として、表示域全体の中に大きな1枚の画像を背景画像としてスクロールしても同じ部分に表示させたいという場合には、background-attachmentプロパティを使うのではなく、"background-repeat : no-repeat ;" を指定した上で、background-positionプロパティにパーセンテージ値(%)、または "left | right | center | top | bottom" のいずれかのキーワードを指定するようにします。これによりスクロールしても背景画像の表示域内での位置は常に同じ部分に表示することができます。