CSS3スタイル虎の巻

background-attachment

background-attachmentは、背景画像のスクロール方法を指定するスタイルです。

解説

背景画像の表示方法の固定・スクロールを指定します。
同時に背景画像の指定(background-image)の指定が必要です。

構文

構文は以下になります。

background-attachment:値

background-attachmentには以下の値が指定できます。

説明
scroll背景画像をスクロールする(初期値)
(例)background-attachment:scroll;
fixed背景画像を固定化する
(例)background-attachment:fixed;

サンプル

背景画像をスクロールする


.sample01{
  width:300px;
  height:200px;
  background-image:url('neko.png');
  background-attachment:scroll;
}

<div class="sample01"></div>

背景画像を固定化する


.sample02{
  width:300px;
  height:200px;
  background-image:url('neko.png');
  background-attachment:fixed;
}

<div class="sample02"></div>

備考

  • スクロールさせる場合は、明示的に指定する必要はありません。

関連項目