background-attachment
background-attachmentプロパティは、背景画像が指定されている場合に背景が表示されている領域に対して、固定(fixed
)するか文書などに合わせてスクロール(scroll
)するかを指定するプロパティです。
初期値は、スクロール(scroll
)になっています。
仮に、背景画像を固定(fixed
)にしていたとしても、見えるのはその要素の背景およびpadding内のみになります。
なので、背景用に用意した画像が極端に大きくてもはみ出して見えたりする事はありません。
ちなみに、仕様上は固定(fixed
)がサポートできないUA(ブラウザなど)は、固定(fixed
)の指定を無視するべきとなっているので、ブラウザによって実装状況が違うといった事が有り得ます。
とは言え、html及びbody要素に関しては固定として正しく解釈するようになっています。
仕様に沿っていると言うべきなのかは分かりませんが、IE6においてはfixed
の指定をした場合body要素以外には上手い事適用されません。
- 対応ブラウザ
-
プロパティの解説
- 値
- scroll|fixed|inherit
- 初期値
- scroll
- 適用される要素
- 全ての要素
- 継承
- しません
- パーセント値
- N/A
- メディア
- visual
値の解説
- scroll
- 文書などに合わせてスクロールします
- fixed
- 表示されている領域に対して固定します
background-attachmentのサンプル
body {
background-image: url(../img/share/bg_body.gif);
background-repeat: repeat-x;
background-attachment: fixed;
}
背景の固定・スクロールを指定するプロパティですので、background-image
の指定は必須になります。
このページのコンテンツ部分の背景画像(花柄みたいな感じの)がfixed
になっているのでどのような感じになるか確認できます。