背景画像の表示サイズ指定
Contain
★contain
cover padding-box
★cover/padding-box
cover content-box
★cover/content-box
<![CDATA[
-HTML-
<div id="contain">★contain</div>
<div id="cover">★cover/padding-box</div>
<div id="cover2">★cover/content-box</div>
-CSS-
div {
width: 300px;
border: solid 30px rgba(255,164,255,0.7);
padding: 30px;
background: url(pulu.jpg);
}
#contain{
background-clip:padding-box;
background-size:contain;
}
#cover{
background-clip:padding-box;
background-size:cover;
}
#cover2{
background-clip:content-box;
background-size:cover;
}
]]>