2019.12.06 2019.12.06

【background-size】背景画像の表示サイズ

みいと

Contents

background-sizeで背景画像の表示サイズを設定する

background-sizeプロパティを使用すると、背景画像の表示サイズを設定することができます。
値には下記のキーワードを1〜2つ指定でき、半角スペース区切りで2つ指定した場合は１つ目は幅、２つ目が高さの設定になります。

以降で各値が背景画像にどのように影響するか、この画像で試してみることにします。

背景画像

background-sizeプロパティにcontainを指定すると、元画像の縦横の比率を保った状態で、背景画像が表示される最大のサイズになります。

containを指定すると縦横比を保ったまま、このように拡大表示されました。

contain

background-sizeプロパティにcoverを指定すると、元画像の縦横の比率を保った状態で、一つの背景画像で表示領域全体を隙間なく覆う最小のサイズにします。
単独使用のみ。

coverはこのように繰り返しなく、一つの画像の縦横比を保って表示します。

cover

background-sizeプロパティは、単位つきの数値で指定することもできます。

単位付きの数値を指定すると、背景画像の大きさを指定して繰り返すことができるようです。

単位つきの数値

background-sizeプロパティには、背景の表示領域のパーセンテージで指定できます。

パーセンテージを指定すると、表示領域に対する幅や高さを指定できます。
この例は幅を表示領域の25％に指定したので、画像が横に4つ並びました。

パーセント

background-sizeプロパティに2つ値を指定した一方がautoの場合、もう一方の長さに合わせて、元画像の縦横の比率に合わせた長さになります。
background-sizeプロパティの初期値はautoになっています。

autoはこのように画像をそのままのサイズで繰り返して表示します。

auto

まとめ

ABOUT ME