background-sizeの使い方

background-sizeで設定できる値について調べてみました。

対応ブラウザ

background-sizeの対応ブラウザはこちら
Android4.3以下ではbackgroundのショートハンドに対応していないので、注意が必要です。

サンプルコード

px指定、%指定、cover、containをそれぞれ試してみました。

HTML

<p>ピクセル指定 (background-size: 80px; と background-size: 80px 40px;)</p>
<div class="box bgs_80"></div>
<div class="box bgs_80-40"></div>

<p>パーセント指定 (background-size: 90%; と background-size: 90% 90%;)</p>
<div class="box bgs_90per"></div>
<div class="box bgs_90per-90per"></div>

<p>cover</p>
<div class="box cover"></div>

<p>contain</p>
<div class="box contain"></div>

CSS

.box {
	float: left;
	margin-right: 20px;
	width: 100px;
	height: 200px;
	border: red 2px solid;
	background: url(image.jpg) center center no-repeat;
}
.bgs_80 {
	background-size: 80px;
}
.bgs_80-40 {
	background-size: 80px 40px; 
}
.bgs_90per {
	background-size: 90%;
}
.bgs_90per-90per {
	background-size: 90% 90%;
}
.cover {
	background-size: cover;
}
.contain {
	background-size: contain;
}

値が1つの場合は画像の幅で、高さはautoになります。
値が2つの場合はそれぞれ画像の幅と高さになります。
background-sizeのデモページ

【参考サイト】

• background-size – CSS | MDN