CSS3

プロパティ

background-origin

→● mdn

背景画像の位置決め基準。

単独のボックスとして描画される要素に対しては、その背景位置決め区画を指定する。複数のボックスとして描画される要素（例えば、複数行に渡るときの各 行の行内ボックスや、複数ページに渡るときの各ページのボックス）に対しては、box-decoration-break [CSS3-BREAK] が、対象になるボックスを指定し、それらの背景位置決め区画を決定する。

<box>

＝border-box
| padding-box
| content-box

padding-box

画像位置をパディング ボックスに相対的にする（ボックスが 1 つだけなら［0 0／100% 100%］がパディング辺の［左上隅／右下隅］に対応する）。

<DIV style="border:10px dotted green; color:#0f0;
 width:100px; height:50px;
 background-image:url(Com/Picture.jpg);
 background-origin:padding-box;
 padding:10px;
">■テスト</DIV>

border-box

画像位置をボーダー ボックスに相対的にする。

<DIV style="border:10px dotted green; color:#0f0;
 width:100px; height:50px;
 background-image:url(Com/Picture.jpg);
 background-origin:border-box;
 padding:10px;
">■テスト</DIV>

content-box

画像位置を内容ボックスに相対的にする。

<DIV style="border:10px dotted green; color:#0f0;
 width:100px; height:50px;
 background-image:url(Com/Picture.jpg);
 background-origin:content-box;
 padding:10px;
">■テスト</DIV>

この画像層に対応する［background-attachment の層値］が fixed の場合、このプロパティの効果はなく、背景位置決め区画は 初期包含ブロック [CSS2] になる。

注記： ［background-clip が padding-box, background-origin が border-box、background-position が top left（初期値）］で、要素のボーダー線幅は 0 でない場合、背景画像の［上側、左側］の部分が切り取られることになる。

テスト