【background-attachment】背景画像を固定・移動する

background-attachmentプロパティでは、背景画像をウィンドウに対して、その位置に固定したままにするか、画面のスクロールと一緒に他の内容とともに移動させるかを指定することができます。

値にキーワードのscrollを指定すると、画面(ウィンドウ)のスクロールに合わせて背景画像も移動し、fixedを指定すると、画面をスクロールしても背景画像は動かなくなります。

なおNetscape4.7以前のバージョンには対応していない他、このプロパティが反映されるのは背景画像が指定されている場合のみとなります。

書式

  • background-attachment : ……… 背景画像の固定・移動

★:scroll、fixed、inherit

fixed
背景画像をブラウザの表示位置に固定する
scroll
背景画像を他の内容とともにスクロール(移動)させる

使用した時の例

.sample1 {
  background-image:url("sample.jpg");
  background-repeat:no-repeat;
  background-attachment:scroll;
}

/* fixedの場合 */
body{
 background-image:url("sample.jpg");
 background-repeat:no-repeat;
 background-attachment:fixed;
 background-position: left bottom;
}
<div class="sample1">scroll(スクロールとともに移動する)</div>

<!-- fixedの方はbodyに指定しています -->

ブラウザ上の表示例

scroll(スクロールとともに移動する)

※fixedの表示例は画面左下に表示されています

対応ブラウザなどのデータ

初期値 scroll 値の継承 継承しない
適用可能な要素 すべての要素
メディア visual
対応ブラウザ Internet Explorer4~ , Google Chrome1~ , Firefox1~ , Opera3.5~ , Safari1~

関連情報