Go to information

background-attachment

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

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

background-attachmentプロパティは背景画像が設定されている全ての要素に対して指定することができまずが、その働きは要素自体を固定するものではなく、表示域に対して背景を固定するものであることに注意してください。Windows版Internet Explorer 6, Macintosh版Internet Explorer 5 では body要素以外に background-attachmentプロパティが指定されていると表示域に対して固定されるのではなく、適用した要素に対して固定が行われる不具合が起こります(この不具合は Windows版Internet Explorer 7 においては改善されています)。

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

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

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

Windows版Internet Explorer
Windows版Internet Explorer 6 では body要素以外に指定されていると表示域に対して固定されるのではなく、適用した要素に対して固定が行われる。Windows版Internet Explorer 7 にて改善済み。
Firefox
Opera
Safari
Macintosh版Internet Explorer 5
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" のいずれかのキーワードを指定するようにします。これによりスクロールしても背景画像の表示域内での位置は常に同じ部分に表示することができます。

現在位置
  1. W3G
  2. CSS
  3. 色と背景
  4. background-attachment
ナビゲーション
ステータス情報
作者
上田 遼
公開
2007-02-02T15:59:20+09:00
更新
2008-12-29T04:30:36+09:00
URI
http://w3g.jp/css/color_background/background-attachment
検索