background-size の使い方＆サンプル

2015-06-25

レスポンシブデザインが増えるにつれ使用頻度の多くなったbackground-size。
背景画像をレスポンシブ対応するときに活躍します。
今までぼんやりとした知識しかなかったので、ここらで勉強し直します。

元の画像

width 360px / height 240pxの写真を参考に。
縦横のサイズが違う方が、分かりやすいので。

background-size のIE対応

background-sizeプロパティはIE9以降対応です。

IE8は未対応。

background-sizeの値

auto（初期値）：
background-sizeを指定しない場合などは、画像の縦横の値を算出する

長さ（数値）：
pxなどで指定する。横幅の値だけの指定も可能。

パーセント（％）：
背景領域に対する背景画像の割合

cover :
背景領域を最小サイズで覆い尽くす（縦横比は保持）

contain:
背景領域を最大サイズで覆い尽くす（縦横比は保持）

background-size　サンプル

基本css

.photo{
	margin:0 0 30px;
	padding:0;
	width:200px;
	height:200px;
	border:01px solid #333;
	background-image:url(images/dummy360240.jpg);
	background-position:left top;
	background-repeat: no-repeat;
}

基本html

<div class="photo" id="demo1"></div>

background-size:auto（初期値）

#demo1{
	bacground-size:auto;
}

背景画像のサイズは実サイズの横360px、縦240pxなので、200px四方のボックスは覆いかくされる。左上が基点。

値で指定する

#demo2{
	background-size:100px 100px;
}
#demo2-2{
	background-size:100px;
}

縦横指定した場合（#demo2）は縦横比は無視される。

横だけを指定した場合（#demo2-2）は、background-size:100px auto;と同じ意味になる。縦横比は保持される。

％で指定する

#demo3{
	background-size:50% 50%;
}
#demo3-2{
	background-size:50%;
}

この場合も値を指定したときと同じような結果に。サンプルが悪かったかね

縦横指定した場合（#demo3）は縦横比は無視される。
背景領域w200px,h200pxの縦横50％に

background-size:cover

#demo4{
	background-size:cover;
}

背景画像の最小サイズ、この写真の場合は高さを背景領域の高さいっぱい迄拡大する、高さよりサイズの大きい横幅は切り取られる

background-size:contain

#demo5{
	background-size:contain;
}

背景画像の最大サイズを背景領域いっぱいに拡大する。この場合は横幅をボックスの横いっぱいに。縦横比は保持されるので横幅よりサイズが小さい高さは同じ比率で拡大されただけなので、下に余白ができます。

DEMO

参考：★CSS3リファレンス
http://www.htmq.com/css3/background-size.shtml