トップページの中の プロパティの中の Bのプロパティ一覧の中の background-attachment

background-attachment

  • 最終更新:2009年7月 8日 13:36

background-attachmentプロパティは、背景画像が指定されている場合に背景が表示されている領域に対して、固定(fixed)するか文書などに合わせてスクロール(scroll)するかを指定するプロパティです。
初期値は、スクロール(scroll)になっています。

仮に、背景画像を固定(fixed)にしていたとしても、見えるのはその要素の背景およびpadding内のみになります。
なので、背景用に用意した画像が極端に大きくてもはみ出して見えたりする事はありません。

ちなみに、仕様上は固定(fixed)がサポートできないUA(ブラウザなど)は、固定(fixed)の指定を無視するべきとなっているので、ブラウザによって実装状況が違うといった事が有り得ます。
とは言え、html及びbody要素に関しては固定として正しく解釈するようになっています。

仕様に沿っていると言うべきなのかは分かりませんが、IE6においてはfixedの指定をした場合body要素以外には上手い事適用されません。

対応ブラウザ
  • IE6一部対応
  • IE7対応
  • IE8対応
  • Firefox3.5対応
  • Opera10対応
  • Safari4対応
  • Chrome3対応

プロパティの解説

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になっているのでどのような感じになるか確認できます。

このページの上部へ