background-originプロパティの説明
CSSのbackground-originプロパティは、要素の背景画像を描画する際の基準となる位置を指定します。ここで指定された値によって、ボーダーを含む要素の一番外側の領域からコンテンツが収まる内部領域までの間で、背景画像の描画開始位置を決めます。
この値は純粋な背景色には効果を及ぼしません。外部ソースを読み込んだ時に表示される画像かグラデーションを対象とします。
background-originに指定できる値
border-box- 背景画像はボーダー（外枠）の外縁を基点に配置されます。
borderが指定されている場合は、その裏側に隠れるように描画され、ボーダー（外枠）に透過部分があればその部分だけが表示されます。 content-box- 背景画像はコンテンツの表示領域を基点に配置されます。
paddingが指定されている場合は、その幅の分だけ内側へ移動します。
background-originの使い方とサンプルコード
background-originプロパティの構文は以下の通りです。
/* キーワード値 */
background-origin: border-box;
background-origin: padding-box;
background-origin: content-box;
/* グローバル値 */
background-origin: inherit;
background-origin: initial;
background-origin: revert;
background-origin: unset;
background-originの実例
それでは簡単なサンプルを見てみましょう。背景画像を単純に配置した要素に、別の値を持つbackground-originを指定します。background-repeatの値がrepeatだった場合は、指定した位置を基点に繰り返しが発生します。
<div class="samp_box">
<p>background-origin</p>
<div id="item_1">border-box</div>
<div id="item_2">padding-box</div>
<div id="item_3">content-box</div>
<div id="item_4">&repeat</div>
</div>
.samp_box {
padding: 1rem;
border: 5px solid #999;
background: #0cf;
text-align: center;
}
.samp_box > div {
width: 200px;
margin: 1rem auto 0 auto;
padding: 2rem;
border: 10px dashed #039;
background: url(/images/sample_bg_stripe.png) no-repeat;
}
#item_1 {
background-origin: border-box;
}
#item_2 {
background-origin: padding-box;
}
#item_3 {
background-origin: content-box;
}
#item_4 {
background-origin: content-box;
background-repeat: repeat;
}