background-sizeで背景画像の表示サイズを指定【CSS】

background-sizeは背景画像の表示サイズを指定するプロパティです。

{background-size: 表示サイズ;}

カンマ（,）で区切って複数の画像のサイズを指定することもできます。

背景画像はbackground-imageプロパティで指定できます。

background-sizeの値の指定方法

background-sizeプロパティで指定できる値には以下のようなものがあります。

初期値と指定されているのがauto。

autoは背景画像の表示サイズが自動的に調整されます。

coverを指定すると、縦横比は保ったまま、背景画像が領域をすべてカバーする表示サイズに調整されます。

containを指定すると、縦横比は保ったまま、背景画像が領域に収まる最大サイズに調整されます。

単位付きの数値で指定することもできます。

背景画像の幅と高さの値を半角スペースで区切って指定しますが、値が1つだけの場合は、2つ目の値には自動的にautoが指定されます。

%値で指定することもできます。

背景画像の幅と高さの値を半角スペースで区切って指定しますが、値が1つだけの場合は、2つ目の値には自動的にautoが指定されます

値は背景画像を表示する領域に対する割合になります。