background-sizeをショートハンドで指定する

background-sizeをショートハンドで指定する方法で少し詰まったので、指定方法をメモ。

サンプルコード

background-positionの後で「/」で区切って指定する必要があるようです。

HTML

<div class="box sample1"></div>
<div class="box sample2"></div>
<div class="box sample3"></div>

CSS

.box {
	width: 300px;
	height: 200px;
	border: #000 2px solid;
}
.sample1 {
	/* 画像が表示されない */
	background: url(./img.jpg) center center contain no-repeat #ccc;
}
.sample2 {
	/* background-positionの後で「/」で区切って指定する */
	background: url(./img.jpg) center center / contain no-repeat #ccc;
}
.sample3 {
	/* 幅と高さそれぞれ指定する場合 */
	background: url(./img.jpg) center center / 50% 50% no-repeat #ccc;
}

background-sizeをショートハンドで指定するデモページ

background-sizeのショートハンドですが、Android4.3以下、iOS5以下では対応していないようなので、注意が必要です。
　

【参考サイト】

• background – CSS | MDN