仕様

background-attachment<attachment>#
一括/個別個別指定プロパティ
初期値scroll
適用対象すべての要素
継承なし
百分率なし
計算値リスト、各項目は指定されたキーワード
補足<attachment> = scroll | fixed | local

background-attachment プロパティは、要素の背景画像の位置をビューポートの中に固定するか、包含ブロックと一緒にスクロールするかを設定する個別指定プロパティです。
非継承プロパティで、初期値は scroll なので、省略時は scroll が指定値となります。

値の数

  1. cdvSample710 > div { height: 6em; background-image: url(./sample16.png),url(./sample32.png),url(./sample.png); background-position: top left,top right,bottom left; background-repeat: no-repeat; outline: solid 1px; overflow: hidden scroll; }
  1. <div class="cdvSample710">
  2. <div style=""><br><br><br><br><br><br><br></div></div>

例示の雛型です。style属性を書き換えて例示しています。
background-image プロパティに画像が複数組み指定してある為、background-attachment プロパティも同じだけ繰り返されます。








  1. background-attachment: local, scroll;

２組 を指定しました。ボックスの背景は、CSS3で複数のレイヤーを持つことができます。レイヤーの数は、background-image プロパティのカンマ区切り値の数によって決まります。
この例示の場合は、background-image プロパティのカンマ区切り値の数は３つです。 その結果、background-attachment プロパティのカンマ区切り値の数は３つ必要となります。余った分は無視され、足りない分は記述順に繰り返しで順次補足されます。
background-attachment: repeat no-repeat, no-repeat repeat, repeat no-repeat; として扱われます。








キーワード

  1. cdvSample700 > div { height: 6em; background-image: url(./sample.png); outline: solid 1px; overflow: hidden scroll; }
  1. <div class="cdvSample400">
  2. <div style="">壱<br>弐<br>参<br><br><br><br><br></div></div>

例示の雛型です。style属性を書き換えて例示しています。

壱
弐
参




  1. background-attachment: scroll;

キーワード scroll の値を指定しました。scroll は、背景は要素自体に関して固定されており、その内容と共にスクロールしません。scroll は background-attachment プロパティの初期値です。

壱
弐
参




  1. background-attachment: local;

キーワード local の値を指定しました。local は、背景は要素のコンテンツに関して固定されています。要素にスクロールメカニズムがある場合、背景は要素のコンテンツとともにスクロールし、背景の描画領域と背景の配置領域は、境界ではなく要素のスクロール可能な領域に相対的です。

壱
弐
参




  1. background-attachment: fixed;

キーワード fixed の値を指定しました。fixed は、背景はビューポートに関して固定されています。ビューポートのないページングメディアでは、固定背景がページボックスに対して固定されているため、すべてのページに複製されます。 ビューごとに1つのビューポートしかないことに注意してください。要素にスクロールメカニズムがある場合でも、固定背景は要素と一緒に移動しません。

壱
弐
参




CSS全体のキーワード

値を１つのみ指定して全体に対して適用されています。１つ１つに対するキーワードとしての使用は出来ません。
個別に適用したい場合は、個別指定プロパティ(border-top-color, border-right-color, border-bottom-color, border-left-color)を使用して設定します。

  1. cdvSample740 > div { height: 4em; background-image: url(./sample.png); padding: 1em; background-attachment: local; outline: solid 1px; overflow: hidden scroll; }
  2. cdvSample740 > div > div { height: 4em; background-image: url(./sample.png); outline: solid 1px; overflow: hidden scroll; }
  1. <div class="cdvSample740">
  2. <div><div style="">壱<br>弐<br>参<br><br><br><br><br></div></div></div>

例示の雛型です。子要素のstyle属性を書き換えて例示しています。
パティングは、親子の余白として指定しています。高さの指定は、意図的に子要素を親要素からはみ出させる事により背景の色を継承しているのか透過しているのか明確化する為に記述しています。

壱
弐
参




  1. background-attachment: inherit;

キーワード inherit を指定しました。inherit は、明示的な継承です。

壱
弐
参




  1. background-attachment: initial;

キーワード initial を指定しました。initial は、プロパティの初期値を設定します。background-attachment プロパティの初期値は scroll です。

壱
弐
参




  1. background-attachment: unset;

キーワード unset を指定しました。unset は、プロパティをリセットし継承プロパティなら継承，非継承プロパティなら初期値を設定します。background-attachment プロパティは非継承プロパティなので初期値の scroll を設定します。

壱
弐
参