書式
background-size: 横のサイズ 縦のサイズ;
background-size: contain;
background-size: cover;
説明
背景画像サイズを指定するにはbackground-sizeを使います。サイズは100pxや25%のように指定することができます。containを指定すると背景画像の縦横どちらかが最大になるように表示されます。coverを指定すると背景画像の縦横どちらかが最大になるように表示されます。複数の背景画像のサイズを指定する場合には,(カンマ)で区切って指定できます。
p {
width: 300px;
height:300px;
border:1px solid red;
background-image: url(sunflower.jpg);
}
#no1 {
background-size : 100px 50px;
}
#no2 {
background-size : contain;
}
#no3 {
background-size : cover;
}
目次に戻る