[CSS] background-sizeで背景画像の表示サイズを指定しよう!

1.background-sizeとは?

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

カンマで区切って複数の画像サイズを指定できます。

値の指定方法は以下の通りです。

{ background-size: 値; }

値の指定方法

2.background-sizeの使い方

それではbackground-sizeの使い方をみていきましょう。

.background-img { 
 background-image: url(image.png); 
 background-size: contain;
 width: 100%;
 height: 300px;
}

上記のようにすることで背景画像を画面幅最大に設定することができます。

他にも値を設定できるのでいろいろと試してみることをお勧めします!