Sponser Link
background-size
背景画像の大きさを指定するためのプロパティ
レスポンシブに使える
[/html] [css] header{
width:100%;
height:130px;
background:url() no-repeat skyblue;
background-size:50%; レスポンシブに画面の50％になる
}
header{
width:100%;
height:130px;
background:url() no-repeat skyblue;
background-size:50% 100%; レスポンシブに画面の50％,高さ100％縦横比が崩れるが
}
header{
width:100%;
height:130px;
background:url() no-repeat skyblue;
background-size:cover; 縦横比は保持、背景領域をカバー、画像全体が表示されるわけではない。background-positionで指定切り取られる部分を
}
header{
width:100%;
height:130px;
background:url() no-repeat skyblue;
background-size:contain; 縦横比は保持、必ず画像全体が表示されるbackground-positionで背景色の部分を指定
background-position:50% 50%;高さも横も中央寄せ
}
Sponser Link