background-origin:背景画像を配置する基準点を指定する

初期値 padding-box
適用対象 全ての要素、::first-letterおよび::first-line
継承 しない
アニメーション 離散値
対応ブラウザ caniuseで確認

background-originプロパティの説明

CSSのbackground-originプロパティは、要素の背景画像を描画する際の基準となる位置を指定します。ここで指定された値によって、ボーダーを含む要素の一番外側の領域からコンテンツが収まる内部領域までの間で、背景画像の描画開始位置を決めます。

この値は純粋な背景色には効果を及ぼしません。外部ソースを読み込んだ時に表示される画像かグラデーションを対象とします。

background-originに指定できる値

padding-box
背景画像は余白の縁を基点に配置されます。これはborderの内縁とpaddingの外縁の境界になります。これが初期値です。
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;
}

background-originに関連するCSSプロパティ

背景(バックグラウンド)
background 背景に関する指定をまとめて行う
background-attachment 背景画像の固定・移動を指定する
background-blend-mode 背景色や背景画像の描画モードを指定する
background-clip 背景の描画範囲を指定する
background-color 背景色を指定する
background-image 背景画像やグラデーションを指定する
background-origin 背景画像を配置する基準点を指定する
background-position 背景画像の表示開始位置を指定する
background-repeat 背景画像の繰り返しを指定する
background-size 背景画像を表示するサイズ(大きさ)を指定する
backdrop-filter 要素の背後領域にぼかしや色変化などのフィルタ効果を与える