background-attachmentプロパティは、ページ画面全体のスクロールの際に、要素内指定位置の背景画像を一緒にスクロールさせるか固定するかを指定 します。従来、background-attachmentプロパティの値は、背景画像を指定位置に固定せず合わせてスクロールさせる「scroll」と、背景画像を固定する「fixed」がありましたが、CSS3で背景画像を要素内のコンテンツと一緒にスクロールさせる「local」が加わっています。それらの動きの違いを確認します。

サンプルはいずれも背景画像を指定した同じdiv要素を利用し、background-attachmentプロパティの値だけを変えています。サンプル1の「scroll」とサンプル2の「fixed」の場合、div要素のスクロールバーを上下すると、背景画像は動かず、テキストのみが動きます。これに対して、サンプル3の「local」の場合は、背景画像とテキストが合わせて動きます。そして、ページ画面全体をスクロールさせると、サンプル2の背景画像のみが指定位置に固定されて留まることが分かります。

サンプル1（ background-attachment:scroll ）

サンプル2（ background-attachment:fixed ）

サンプル3（ background-attachment:local ）

サンプルのhtmlソース（background-attachmentの指定以外共用）

<div class="box scroll">
  <p>（1）ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</p>
  <p>（2）ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</p>
    /*----- 中略 -----*/
  <p>（9）ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</p>
  <p>（10）ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</p>
</div>

サンプルのCSSソース

.scroll {	
    background-attachment:scroll;
    }
.fixed {
    background-attachment:fixed;
    }
.local {
    background-attachment:local;
    }