CSS3

プロパティ

background-attachment

→● mdn

背景画像のスクロール時に於ける固着法。

プロパティの値は、<attachment> キーワードからなる、カンマ区切りの層値リストとして与えられる：

<attachment>

＝scroll
| fixed
| local

fixed

背景は表示域に固定される。（表示域を持たない）ページ化媒体においては、ページボックスに固定され、したがって毎ページごとに再現される。

表示域は各ビューにつき 1 個に限られることに注意。要素がスクロール用の仕組み（ overflow プロパティ [CSS2] を見よ）を備えていたとしても、fixed による背景は、要素と伴に移動することはない。

<DIV style="border:1px solid red; width:100px; height:100px;
 background-image:url(Com/BG1.jpg);
 background-attachment:fixed;
">
</DIV>

<DIV style="border:1px solid red; width:100px; height:100px;
 background-image:url(Com/BG1.jpg);
 background-attachment:fixed;
 overflow:scroll;
">aaaaaaaaaaaaaaaaaaaaa
</DIV>

local

背景は要素の内容に固定される。要素がスクロール用の仕組みを備えているならば、背景は、要素の内容と伴にスクロールする。また、背景塗り区画と背景位置決め区画は、それらの枠を成すボーダー区画ではなく、要素のスクロール可能な区画に相対的になる。スクロール可能な区画は ボーダーを含まないので、スクロール可能な要素においては、background-clip に対する値 border-box は、padding-box と同じに扱われてもよい。

<DIV style="border:1px solid red; width:100px; height:100px;
 background-image:url(Com/BG1.jpg);
 background-attachment:local;
">
</DIV>

<DIV style="border:1px solid red; width:100px; height:100px;
 background-image:url(Com/BG1.jpg);
 background-attachment:local;
 overflow:scroll;
">aaaaaaaaaaaaaaaaaaaaa
</DIV>

scroll

背景は、要素自身に固定され、その内容と伴にはスクロールしない（実質的に、要素のボーダーに留められる）。

<DIV style="border:1px solid red; width:100px; height:100px;
 background-image:url(Com/BG1.jpg);
 background-attachment:scroll;
">
</DIV>

<DIV style="border:1px solid red; width:100px; height:100px;
 background-image:url(Com/BG1.jpg);
 background-attachment:scroll;
 overflow:scroll;
">aaaaaaaaaaaaaaaaaaaaa
</DIV>

画像が表示域（またはページボックス）に固定されたとしても、それが可視になる部分は要素の背景塗り区画に限られる。他の場合は切り取られない（そのような場合のふるまいは、特別な要素の背景に）。したがって、画像は、敷き詰められるのでない限り、不可視になり得る。

body{
  background: red url("pendant.gif");
  background-repeat: repeat-y;
  background-attachment: fixed;
}

テスト