| 項 目 | 説 明 |
|---|---|
| 記述形式 | セレクタ {background-origin: 値 } |
| 値 の形式 | padding-box，border-box，content-box |
| 初 期 値 | padding-box |
| 対応ブラウザー | C3+ / e9+ / N?+ / Fx4+ / Op10.5+ / Ch3+ / Sa3+ |
| 適用可能な要素 | すべての要素 |
| 継 承 | しない |
background-originプロパティ は，背景ボックスの基準位置 を指定します。 半角カンマ( , )で区切って複数の値を指定することもできます。 background-positionプロパティ で指定する背景ボックスの位置は，この基準位置からのオフセットで指定します。
指定できる値の形式は，以下のとおりです。
| 値 | 説 明 |
|---|---|
| padding-box | 要素の パディングボックス を基準にします。 |
| border-box | 要素の 境界ボックス を基準にします。 |
| content-box | 要素の コンテンツボックス を基準にします。 |
| 備 考 | 境界，padding，コンテンツ の順に内側の領域になります。 background-positionプロパティ の値は，指定したボックスからのオフセット値で， ‘0 0’ は背景ボックスを左上の頂点で揃えることを表し， ‘100% 100%’ は右下の頂点で揃えることを表します。 |
次のような，背景画像の場合では，background-position の設定で left，right，top，bottom などを指定（この例では "left top"）すると，３つのボックスの領域が同じでない場合には，background-origin の指定の違いにより画像の表示位置が変わります。 （sample1 ～ sample3 は 最後の background-origin プロパティ以外は同じ指定内容です。）
| HTMLソース | |
|---|---|
| CSS <head> ～ </head> |
<style type="text/css" media="screen, handheld, print, tv" > <!-- div.sample1 { width: 30%; padding: 2em; border: solid 1.5em transparent; background: url(../logo.gif) left top no-repeat yellow; background-size: contain; background-origin: border-box; } div.sample2 { width: 30%; padding: 2em; border: solid 1.5em transparent; background: url(../logo.gif) left top no-repeat yellow; background-size: contain; background-origin: padding-box; } div.sample3 { width: 30%; padding: 2em; border: solid 1.5em #99CC99; background: url(../logo.gif) left top no-repeat yellow; background-size: contain; background-origin: content-box; } --> </style> |
| HTML <body> ～ </body> |
<div class="sample1"> ああああああああああああああ <br>ああああああああああああああ <br>ああああああああああああああ </div> <br> <div class="sample2"> ああああああああああああああ <br>ああああああああああああああ <br>ああああああああああああああ </div> <br> <div class="sample3"> ああああああああああああああ <br>ああああああああああああああ <br>ああああああああああああああ </div> |
| ブラウザー 表示例 |
|---|
| ↓↓↓background-origin: border-box; （背景画像が境界ボックスに合わせて配置されます）
ああああああああああああああ
ああああああああああああああ ああああああああああああああ ↓↓↓background-origin: padding-box; （背景画像がパディングボックスに合わせて配置されます）
ああああああああああああああ
ああああああああああああああ ああああああああああああああ ↓↓↓background-origin: content-box; （背景画像がコンテンツボックスに合わせて配置されます）
ああああああああああああああ
ああああああああああああああ ああああああああああああああ |
なお，この場合，background-clip プロパティは，指定がないため初期値の border-box となるため， いずれの場合も，背景の表示範囲は境界線の領域を含めた 境界ボックス になります。 （sample2 の黄色の背景部分を見てください。）
一般的に、body要素 に背景画像を指定すると，ブラウザーではタイル状に敷き詰めた形で繰り返し背景画像が表示されます。 この表示形態を変更するには，background-repeat，background-position，background-attachment などの CSS プロパティを用います。