仕様

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

background-origin プロパティは、要素の背景配置領域を設定する個別指定プロパティです。
非継承プロパティで、初期値は padding-box なので、省略時は padding-box が指定値となります。

値の数

  1. cdvSample810 > 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; padding: 1em; border: solid 1em transparent; outline: solid 1px; }
  1. <div class="cdvSample810">
  2. <div style=""></div></div>

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

  1. background-origin: content-box, border-box;

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

キーワード

  1. cdvSample800 > div { height: 7em; background-image: url(./sample.png); background-position: top left,top right,bottom left; background-repeat: no-repeat; padding: 1em; border: solid 1em transparent; outline: solid 1px; }
  1. <div class="cdvSample800">
  2. <div style=""></div></div>

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

  1. background-origin: border-box;

キーワード border-box の値を指定しました。border-box は、背景の配置位置は境界ボックスを基準にしています。

  1. background-origin: padding-box;

キーワード padding-box の値を指定しました。padding-box は、背景の配置位置はパディングボックスを基準にしています。padding-box は background-origin プロパティの初期値です。

  1. background-origin: content-box;

キーワード content-box の値を指定しました。content-box は、背景の配置位置はコンテンツボックスを基準にしています。

CSS全体のキーワード

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

  1. cdvSample840 > div { height: 4em; background-image: url(./sample.png); padding: 1em; border: solid 1em transparent; background-origin: border-box; outline: solid 1px; }
  2. cdvSample840 > div > div { height: 4em; background-image: url(./sample.png); padding: 1em; border: solid 1em transparent; outline: solid 1px; }
  1. <div class="cdvSample840">
  2. <div><div style="">壱<br>弐<br>参<br><br><br><br><br></div></div></div>

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

壱
弐
参




  1. background-origin: inherit;

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

壱
弐
参




  1. background-origin: initial;

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

壱
弐
参




  1. background-origin: unset;

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

壱
弐
参