CSS の背景画像のサイズをコントロール「background-size」のあれこれ

About CSS

ウェブサイトの背景画像を CSS で指定する background 系には、backgrousd-size という背景画像をどう見せるか? をいろいろと指定できる便利なプロパティがあります。

特に昨今のウェブサイトは、レスポンシブ対応にしなければならないので、background-size での背景画像指定は結構重要かもしれません。

使いこなせば制作の幅が広がりますし、何よりもおもしろいです!

backgrousd-size の種類

backgrousd-size: cover; 縦横比は維持。常に表示エリア全てを画像で覆う。画像のはみ出す部分は自動非表示。
backgrousd-size: contain; 縦横比は維持。画像が表示エリアに収まるように配置。画像全体が必ず表示される。
backgrousd-size: 値 auto; 横幅は指定した値。縦幅は比率を維持。画像のはみ出す部分は自動非表示。
backgrousd-size: auto 値; 縦幅は指定した値。横幅は比率を維持。画像のはみ出す部分は自動非表示。

backgrousd-size の使い方

まず、サンプルの背景には以下の画像を指定します。

これを backgrousd-size の効果それぞれで使っていきます。

backgrousd-size: cover;

backgrousd-size: cover; は、ボディやボックスなどの指定エリア全体を必ず覆う形で表示されます。画像よりも大きいサイズのエリアでも自動で拡大されて、画像がはみ出す部分は自動でオーバーフローされます。もちろん縦横比は維持です。

backgrousd-size: contain;

backgrousd-size: contain; は、表示エリアに必ず画像の全体が入ります。縦横比は維持されます。横幅が足りない感じになりますが、画像をちゃんと見せたい時に使います。

backgrousd-size: 値 auto;

backgrousd-size 値 auto; は、左が「値」のときには横軸の指定になります。横幅だけ指定して、縦は比率を維持して表示します。はみ出す部分は自動でオーバーフローします。

backgrousd-size: auto 値;

backgrousd-size: auto 値; は、右が「値」のときには縦軸の指定になります。縦幅だけ指定して、横は比率を維持して表示します。はみ出す部分は自動でオーバーフローします。

デモページをつくりました

参考までに、backgrousd-size すべての効果を使ったデモを別ページに用意しました。