［み］背景画像のサイズを拡大・縮小できるbackgroundプロパティ

背景画像を指定されて、background-imageプロパティで指定してみたら、でかすぎる！みたいな事ってよくありますよね。

もちろん、無駄なくらい大きすぎるときには、読み込みに時間が余計にかかってしまうのでPhotoShopとかで解像度を変更する必要がありますが、ちょっと縮小したいっていう時には、background-sizeプロパティで指定してやると、簡単にサイズを縮小できます。もちろん、拡大もできますが、もやもや・ギザギザになってしまうので、拡大はおススメできないですね…

背景画像のサイズを数値を使って指定する

px・%などの単位をつけて、数値で指定することで、背景画像のサイズを拡大・縮小することができます。

CSS

.sample {
  background-size: 幅 高さ;
}

このように、幅高さの順に指定します。

CSS

.sample01 {
  background-size: 30px 50px;
}

.sample02 {
  background-size: 10% 50%;
}

.sample03 {
  background-size: 3rem 4rem;
}

こんな感じに単位をつけて数値で指定できます。

CSS

.sample04 {
  background-size: 100px;
}

また、基本は幅高さの順に指定しますが、sample04のように、1つだけ指定した場合、幅が指定の数値になり、高さはauto（縦横比保持）になります。

背景画像のサイズをキーワードで指定する

background-sizeプロパティでは、px・%を使って数値で指定できるのはもちろんですが、表示領域を覆うようにとか、って言う指定もできます。

指定要素を背景画像が完全に覆う形で表示させる

CSS

.sample05 {
  background-size: cover;
}

背景画像の縦横比を保持したまま、指定要素を背景画像が完全に覆う形で表示させるが background-size: cover です。当然、指定要素のサイズよりも、背景画像のサイズが大きければはみ出しますが、はみ出た部分は表示されません。

指定要素に背景画像が収まる形で表示させる

CSS

.sample06 {
  background-size: contain;
}

背景画像の縦横比を保持したまま、指定要素に背景画像が収まる形で表示させるのが background-size: contain です。 background-size: cover では、画像のサイズによってははみでることがありますが、この background-size: contain の場合は、はみ出すことはありません。逆に、指定要素の縦横比と背景画像の縦横比が違う場合は、余白ができます。