background-size は CSS のプロパティで、要素の背景画像の大きさを変更し、画像の幅や高さから見た完全な大きさの画像をタイル表示するという既定の動作を変更することができます。こうすることで、画像を必要に応じて拡大したり縮小したりすることができます。
巨大な画像を並べて表示
巨大な画像、2982x2808の Firefox のロゴ画像を想像してください。この画像を300x300ピクセルの要素の中に4枚並べて表示したいとします (いくつかの理由で恐ろしく悪いサイトデザインですが)。 background-size に固定値の150ピクセルの値を使用すると、このようにすることができます。
HTML
<div class="tiledBackground"> </div>
CSS
.tiledBackground {
background-image: url(https://www.mozilla.org/media/img/logos/firefox/logo-quantum.9c5e96634f92.png);
background-size: 150px;
width: 300px;
height: 300px;
border: 2px solid;
color: pink;
}
結果
画像の拡大縮小
以下のように、画像の水平と垂直の両方の寸法を指定することもできます。
background-size: 300px 150px;
結果は以下のようになります。
画像の拡大
一方で、背景の画像を拡大することができます。ここでは32x32ピクセルのファビコンを300x300ピクセルに拡大します。
.square2 {
background-image: url(favicon.png);
background-size: 300px;
width: 300px;
height: 300px;
border: 2px solid;
text-shadow: white 0px 0px 2px;
font-size: 16px;
}
見てのとおり、 CSS は実際には基本的に同一で、画像ファイルの名前を保存してください。
特殊な値: "contain" と "cover"
<length> の値以外に、 CSS の background-size プロパティは contain と cover という二つの特殊な寸法の値を提供しています。これらを見てみましょう。
contain
contain の値は、包含ボックスの寸法にかかわらず、背景画像をそれぞれの方向にできるだけ大きくなるように、ただしコンテナーの対応する辺の長さを超えないように拡大します。以下の例の大きさを変えて試してみてください。
HTML
<div class="bgSizeContain"> <p>この要素の寸法を変更してみてください！</p> </div>
CSS
.bgSizeContain {
background-image: url(https://www.mozilla.org/media/img/logos/firefox/logo-quantum.9c5e96634f92.png);
background-size: contain;
width: 160px;
height: 160px;
border: 2px solid;
color: pink;
resize: both;
overflow: scroll;
}
結果
cover
cover の値は、背景画像が対応する方向のコンテナーの寸法より大きいか同じであることを保証しつつ、できるだけ画像が小さくなるように拡大縮小することを指定します。以下の例の大きさを変えて試してみてください。
HTML
<div class="bgSizeCover"> <p>この要素の寸法を変更してみてください！</p> </div>
CSS
.bgSizeCover {
background-image: url(https://www.mozilla.org/media/img/logos/firefox/logo-quantum.9c5e96634f92.png);
background-size: cover;
width: 160px;
height: 160px;
border: 2px solid;
color: pink;
resize: both;
overflow: scroll;
}