background-origin:背景画像を配置する基準点を指定する
初期値 | padding-box |
適用対象 | 全ての要素、::first-letter および::first-line |
継承 | しない |
アニメーション | 離散値 |
対応ブラウザ | caniuseで確認 |
background-originプロパティの説明
background-origin
は、要素の背景画像を描画する際の基準となる位置を指定します。ここで指定された値によって、ボーダーを含む要素の一番外側の領域からコンテンツが収まる内部領域までの間で、背景画像の描画開始位置を決めます。
この値は純粋な背景色には効果を及ぼしません。外部ソースを読み込んだ時に表示される画像かグラデーションを対象とします。
background-originに指定できる値
background-originの使い方とサンプル
background-origin
プロパティの構文は以下の通りです。
CSS
/* キーワード値 */
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
だった場合は、指定した位置を基点に繰り返しが発生します。
CSS
.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;
}
HTML
<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>
表示確認