背景画像の表示サイズを指定するには？
要素書式
対応ブラウザ
値一覧
| 値 | 内容 |
| サイズ指定 | 指定できる値は次の通りです。
「contain」：画像の縦横比を維持した上で、表示領域に収まる最大のサイズで表示します。
「cover」：画像の縦横比を維持した上で、表示領域を覆う最小のサイズで表示します。
「auto」：「auto」だけが指定された場合は、画像の本来のサイズで表示します。
長さ：画像の幅と高さをスペース区切りで指定します。
パーセント値：表示領域に対する割合で、画像の幅と高さをスペース区切りで指定します。
長さやパーセント値で、片方の値を省略するか「auto」と指定すると、もう一方の値を基準に自動的に計算されます。
なお、「background-size」プロパティの初期値は「auto」となります。 |
解説文
background-sizeプロパティを使うと、背景画像の表示サイズを指定することができます。
サンプルソース
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>サンプル</title>
<style>
p{
width:400px;
height:100px;
padding:15px;
border:20px dashed #996699;
color:orange;
font-size:25px;
background: url(penguin.png);
}
#sample1{
background-size:contain;
}
#sample2{
background-size:cover;
}
#sample3{
background-size:50px auto;
}
#sample4{
background-size:100% 100%;
}
</style>
</head>
<body>
<p id="sample1">contain</p>
<p id="sample2">cover</p>
<p id="sample3">50px auto</p>
<p id="sample4">100% 100%</p>
</body>
</html>
下記画像を、サンプルソースで指定しているフォルダに保存して下さい。初期状態では、サンプルソースと同じ階層のフォルダが指定されています。
関連項目
