background-originを使ってみる

背景画像の基準位置を指定するbackground-originを使ってみます。

対応ブラウザ

background-originの対応ブラウザはこちら
IE8以下では対応していないようです。
　

サンプルコード

HTML

<p>指定なし</p>
<div class="box"></div>
<p>border-box</p>
<div class="box border-box"></div>
<p>padding-box</p>
<div class="box padding-box"></div>
<p>content-box</p>
<div class="box content-box"></div>

CSS

.box {
	width: 240px;
	height: 180px;
	padding: 10px;
	border: 10px dotted;
	background: url(image.jpg) left top no-repeat;
}
.border-box {
	background-origin: border-box;
}
.padding-box {
	background-origin: padding-box;
}
.content-box {
	background-origin: content-box;
}

background-originのデモページ

【参考サイト】

• background-origin – CSS | MDN