レスポンシブwebデザイン background-sizeテスト

共通css

css

#bgBase,#bgwidth100,#bgheight100,#bgcover{
	margin:0 auto 50px;
	width:90%;
	height:240px;
	background:url(img/bg.gif) center center no-repeat;
	border:1px #ccc solid;
	}

@media screen and (max-width:480px){
	#bgBase,#bgwidth100,#bgheight100,#bgcover{
		height:160px;
	}
}	

デフォルト

全体を覆う

#bgcover{	
	background-size:cover;
}

横方向にフィット

#bgwidth100{
	background-size:100% auto;
}

縦方向にフィット

#bgheight100{
	background-size:auto 100%;
}