CSS
.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;
}
HTML
<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>
表示
border-box
こんにちわ
padding-box
こんにちわ
content-box
こんにちわ