| 属性名 | background-origin |
|---|---|
| 値 | <box>[, <box>]* |
| 値の詳細 | <box> = border-box | padding-box | content-box |
| 初期値 | padding-box |
| 適用可能要素 | すべての要素 |
| 継承 | 継承しない |
| メディア | visual |
| アニメーション | 不可 |
| CSS | IE/Edge | Firefox | Chrome | Opera | Safari |
|---|---|---|---|---|---|
| CSS3 | 9.0 | 4.0 | 1.0 | 10.5 | 3.0 |
背景画像を表示する際の基準位置を指定します。
| 値 | 説明 |
|---|---|
| border-box | ボーダーの右上を基準位置とする。 |
| padding-box | パディングの右上を基準位置とする。 |
| content-box | コンテンツの右上を基準位置とする。 |
.test {
width: 100px;
height: 50px;
padding: 10px;
border: 10px solid rgba(20, 20, 20, 0.4);
background-image: url(./image/back.gif);
background-repeat: no-repeat;
}
.test-border-box {
background-origin: border-box;
}
.test-padding-box {
background-origin: padding-box;
}
.test-content-box {
background-origin: content-box;
}
<h5>border-box</h5> <div class="test test-border-box">こんにちわ</div> <h5>padding-box</h5> <div class="test test-padding-box">こんにちわ</div> <h5>content-box</h5> <div class="test test-content-box">こんにちわ</div>