サイト制作に関するメモ書き

HOME > HTML・CSS > background-originを使ってみる

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のデモページ

border-box 背景画像の基準位置をborderの領域に設定。
padding-box 背景画像の基準位置をpaddingの領域に設定。初期値。
content-box 背景画像の基準位置をコンテンツの領域に設定。

 

【参考サイト】

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

▲PAGE TOP