CSS3: background-attachment プロパティ - 背景画像のスクロール・固定

■ 概要

項　　目説　　明
記述形式 セレクタ {background-attachment: 値 }
値 の形式 scroll，fixed，local
初 期 値 scroll
対応ブラウザー C1+ / e4+ / N6+ / Fx1+ / Op3.5+ / Ch1+ / Sa1+
適用可能な要素 すべての要素
継　　承 しない

■ 解説

background-attachmentプロパティ は，ページのスクロールのときに 背景画像を一緒にスクロールさせるか固定するかを指定 します。

指定できる値の形式は，以下のとおりです。

値説　　明
scroll 背景画像も一緒にスクロールします。
fixed 背景画像は固定してスクロールしません。
local 背景画像は要素内容に関して固定します。
もし要素の内容がスクロールできる場合は，背景は要素内容と一緒にスクロールします。　このとき，要素の境界より奥にある背景があれば，それも一緒にスクロールします。　ただし，要素の境界自体は一緒にスクロールしません。

■ 使用例（ background-attachment プロパティの利用）

次の例の class="sample1" ～ class="sample3" では，background-attachmentプロパティ を除いて，他は全く同じ指定です。 　また，class="sample4" では，境界の線の色を transparent にして，背景画像の表示範囲を示しています。

HTMLソース
CSS
<head> ～ </head>		 
<style type="text/css" media="screen, handheld, print, tv" >
<!--
p.sample1 {width:320px; height:120px; 
           border: solid 1.5em #99CC99;
           background: url(../logo.gif) left top;
           background-size: 100px 100px;       
           overflow: scroll;
           background-attachment: scroll;}
p.sample2 {width:320px; height:120px; 
           border: solid 1.5em #99CC99;
           background: url(../logo.gif) left top;
           background-size: 100px 100px;       
           overflow: scroll;
           background-attachment: fixed;}
p.sample3 {width:320px; height:120px;
           border: solid 1.5em #99CC99;
           background: url(../logo.gif) left top;
           background-size: 100px 100px;       
           overflow: scroll;
           background-attachment: local;}
p.sample4 {width:320px; height:120px;
           border: solid 1.5em transparent;
           background: url(../logo.gif) left top;
           background-size: 100px 100px;       
           overflow: scroll;
           background-attachment: scroll;}
-->
</style>
HTML
<body> ～ </body>		 
　↓↓↓<b>background-attachment: scroll;</b>
<p class="sample1">
   <b>class=&quot;sample1&quot;: scroll</b>
   <br>When in the Course of human events, it becomes necessary for 
   one people to dissolve the political bands which have connected 
   them with another, and to assume among the powers of the earth, 
   the separate and equal station to which the Laws of Nature and 
   of Nature's God entitle them, a decent respect to the opinions 
   of mankind requires that they should declare the causes which
   impel them to the separation.
</p>
　↓↓↓<b>background-attachment: fixed;</b>
<p class="sample2">
   <b>class=&quot;sample2&quot;: fixed</b>
   <br>When in the Course of human events, it becomes necessary for 
   one people to dissolve the political bands which have connected 
   them with another, and to assume among the powers of the earth, 
   the separate and equal station to which the Laws of Nature and 
   of Nature's God entitle them, a decent respect to the opinions 
   of mankind requires that they should declare the causes which
   impel them to the separation.
</p>
　↓↓↓<b>background-attachment: local;</b>
<p class="sample3">
   <b>class=&quot;sample3&quot;: local</b>
   <br>When in the Course of human events, it becomes necessary for 
   one people to dissolve the political bands which have connected 
   them with another, and to assume among the powers of the earth, 
   the separate and equal station to which the Laws of Nature and 
   of Nature's God entitle them, a decent respect to the opinions 
   of mankind requires that they should declare the causes which
   impel them to the separation.
</p>
<p class="sample4">
   <b>class=&quot;sample4&quot;: scroll</b>
   <br>When in the Course of human events, it becomes necessary for 
   one people to dissolve the political bands which have connected 
   them with another, and to assume among the powers of the earth, 
   the separate and equal station to which the Laws of Nature and 
   of Nature's God entitle them, a decent respect to the opinions 
   of mankind requires that they should declare the causes which
   impel them to the separation.
</p>

ブラウザー 表示例
　↓↓↓background-attachment: scroll; 　（背景画像が要素ボックスやページの表示内容と一緒に動きます）
　　　（ブラウザーのスクロールバーで上下して見てください）

class="sample1": scroll
When in the Course of human events, it becomes necessary for one people to dissolve the political bands which have connected them with another, and to assume among the powers of the earth, the separate and equal station to which the Laws of Nature and of Nature's God entitle them, a decent respect to the opinions of mankind requires that they should declare the causes which impel them to the separation.

　↓↓↓background-attachment: fixed; 　（背景画像は要素ボックスが動いてもブラウザー・ウィンドウ内の定位置です）
　　　（ブラウザーのスクロールバーでゆっくり上下して見てください）

class="sample2": fixed
When in the Course of human events, it becomes necessary for one people to dissolve the political bands which have connected them with another, and to assume among the powers of the earth, the separate and equal station to which the Laws of Nature and of Nature's God entitle them, a decent respect to the opinions of mankind requires that they should declare the causes which impel them to the separation.

　↓↓↓background-attachment: local;　（背景画像は境界ボックスの表示内容一緒に要素内で動きます）
　　　（この要素のスクロールバーで上下して見てください）

class="sample3": local
When in the Course of human events, it becomes necessary for one people to dissolve the political bands which have connected them with another, and to assume among the powers of the earth, the separate and equal station to which the Laws of Nature and of Nature's God entitle them, a decent respect to the opinions of mankind requires that they should declare the causes which impel them to the separation.

　↓↓↓（背景画像の表示範囲は 境界ボックスになっています ⇒ 境界部分も含みます）

class="sample4": scroll
When in the Course of human events, it becomes necessary for one people to dissolve the political bands which have connected them with another, and to assume among the powers of the earth, the separate and equal station to which the Laws of Nature and of Nature's God entitle them, a decent respect to the opinions of mankind requires that they should declare the causes which impel them to the separation.

なお，要素内の背景画像の表示範囲は，background-clip プロパティで指定できます。 　つまり，上の例では，class="sample4" の表示を見ればわかるように，背景画像は，

  1. background-clip の初期値： 境界ボックス が 表示範囲
  2. background-origin の初期値： パディングボックス が 配置の基準
となっています。

■ 備考

【参考ページ】