background-size

CSS3で追加されたbackground-sizeプロパティは背景画像のサイズを指定できるプロパティです。

値がpxや%などで1つのみ指定されている場合、背景画像の横幅を指定することができます。

.target{
	background-image:url("aaa.jpg");
	background-size:100px;
}

値を2つ指定されている場合は、最初の値で横幅、2つ目の値で高さが指定できます。

.target{
	background-image:url("aaa.jpg");
	background-size:100px 200px;
}

「contain」を指定した場合、要素と背景画像の最大辺が同じサイズになるように背景画像を縦横比を保ったまま拡大・縮小します。要素と背景画像の縦横比が異なる場合は繰り返しなどによる複数の背景が表示されます。

.target{
	background-image:url("aaa.jpg");
	background-size:contain;
}

「cover」を指定した場合、要素と背景画像の最小辺が同じサイズになるように背景画像を縦横比を保ったまま拡大・縮小します。要素と背景画像の縦横比が異なる場合は背景画像の一部がトリミングされます。

.target{
	background-image:url("aaa.jpg");
	background-size:cover;
}

複数の背景に対して個別に指定したい場合はカンマ(,)区切りで指定を行います。

.target{
	background-image:url("aaa.jpg"),url("bbb.jpg");
	background-size:cover,100px 50px;
}

IEでは10以上からbackground-sizeをサポートしています。

登録日 : 2014年01月12日最終更新日 : 2014年1月12日

CSSリファレンス