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>
表示確認
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 | 要素の背後領域にぼかしや色変化などのフィルタ効果を与える |