【CSS】「background-size」プロパティの使い方！【背景画像のサイズの設定】

CSSの「background-size」の使い方が詳しく知りたい。

この記事はこのような方へ向けて書いています。

この記事を読むことで、これらの知識が得られます。

この記事でサクッと「background-size」について学習しちゃって下さい！

また、下の動画でも「background-size」プロパティについて詳しく解説しているので、一緒に実際にコードを書きながら学びたい方はこちらをどうぞ！

「background-size」は何ができるプロパティ？

「background-size」を使うと、要素の「背景画像のサイズ」の設定ができます。

まずは、見てもらった方が速いと思うので、こちらをどうぞ！

上の画像は、ピンク色の境界線がついた要素に背景画像を設定したものです。

では、「background-size」を使ってみます。

すると、下のようになります。

このように、「背景画像のサイズ」の設定ができるのが、「background-size」プロパティです。

なるほど！イメージできたよ！

また、「背景画像の設定」は、「background-image」プロパティで行うことができます。もしここの知識が必要な方は、僕が書いた下記の記事をご活用ください。

「background-size」に、設定できる値は？

「background-size」に、設定できる値は下記の通りです。

それでは、それぞれについて、もう少し詳しく解説しますね。

キーワード

「background-size」には、下記のキーワードを使うことができます。

これらが使えます。

「contain」

このようなサイズの背景画像があったとします。

このピンクの枠線がついた要素の対して、「background-size」に「contain」としてみると、下のようになります。

.container {
    background-size: contain;
  }

このように、「contain」を使うと、背景画像が表示領域の中に収まる最大のサイズに拡大・縮小してくれます。

縦横比（アスペクト比）は保たれます。

この３つが満たされるサイズになりますね。

ふむふむ。

「cover」

このようなサイズの背景画像があったとします。

このピンクの枠線がついた要素の対して、「background-size」に「cover」としてみると、下のようになります。

.container {
    background-size: cover;
  }

このように、「cover」を使うと、背景画像が表示領域の中に隙間ができない、かつ最小のサイズに拡大・縮小してくれます。

縦横比（アスペクト比）は保たれます。

この３つが満たされるサイズになりますね。

なるほどね！

「単位付きの数値」の使い方

「px」などの単位がついた数値で背景画像のサイズの設定をすることもできます。

.container {
    background-size: 600px 300px;
  }

このように2つの値を使います。

１つ目の値は、「画像の幅」で、

２つ目の値は、「画像の高さ」です。

また、2つ目の値を省略することもできて、その場合は、高さが「auto」となります。

「%」の使い方

「%」を使うことで、表示領域に対して、どのくらいのサイズの画像にするかという感じで、相対的に指定することができます。

.container {
    background-size: 50% 50%;
  }

１つ目の値は、「画像の幅」で、

２つ目の値は、「画像の高さ」です。

また、2つ目の値を省略することもできて、その場合は、高さが「auto」となります。

「auto」

.container {
    background-size: auto;
  }

幅と高さの片方に「auto」が指定されると、本来の「縦横比の維持」になり、

幅と高さの両方だと、本来の「縦横比の維持」と、本来の画像の「サイズ」のままとなります。

「auto」「単位付きの数値」「%」は組み合わせて使える。

「auto」「単位付きの数値」「%」は組み合わせて使うことができます。

.container {
    background-size: auto 50%;
  }

こんな感じですね。

※ですが、「contain」「 cover」は単体で使うので注意してください。

公式定義

「background-size」の公式定義は、下記の通りです。

これについても、知っておいてください！

複数の背景画像のサイズの設定をする方法。

.container {
    background-image: url(33.png), url(34.png);

    background-size: auto 60%, 200px auto;
}

複数の背景画像のサイズの設定をするには、「カンマ区切り」で複数の値を書いてあげればOKです。

１つ目の背景画像に対応するのは、「background-size」に書いた１つ目の値です。以降も、そのまま書いた順番で設定できます。

上のような感じで設定することができます。

まとめ。

「background-size」を使うことで、背景画像のサイズの設定ができる。

設定できる値は下記の通り。

「background-size」には、下記のキーワードが使える。

「auto」「単位付きの数値」「%」は組み合わせて使える。

※ですが、「contain」「 cover」は単体で使うので注意。

複数の背景画像のサイズの設定をするには、「カンマ区切り」で複数書けばOK。

また、下の動画でも「background-size」プロパティについて詳しく解説しているので、一緒に実際にコードを書きながら学びたい方はこちらをどうぞ！

それではこんな感じでこの記事を終わります！

ではまた！