この記事ではCSSの【background-size】の使い方をご紹介します。

background-sizeを使うと、背景画像のサイズを操作することができます。レスポンシブサイトの場合、background-sizeを使えば背景サイズを自動で調整することができますよ。

スポンサーリンク

background-sizeの基礎知識

通常はautoが初期値になっています。

他のプロパティ値は大きく2つに分類され、表示エリアいっぱいに画像を表示させるcontain/coverと長さを直接指定するpx/%があります。

auto 初期値。そのままの比率で表示。
 contain 縦横比を保ち、画像を最大まで大きくする
cover 縦横比を保ち、表示エリアに余白がでないように画像が拡大・縮小し、切り取られる
px 長さを数値で指定して、背景画像のサイズを指定する
% 長さを%で指定して、背景画像のサイズを指定する

background-sizeを用いたサンプルコード

では実際にひとつずつサンプルを見ていきましょう。

サンプルではdiv要素にbackground-imageで犬の画像を指定して、background-repeatで繰り返しはなしに設定しています。そこにbackground-sizeを使って画像サイズを指定します。

auto

autoだけだと比率を保持してそのまま画像が表示されます。

See the Pen background-size1 by handywebdesign (@handywebdesign) on CodePen.

contain

containを使用すると、画像全体が見える状態で表示エリア全体に拡大縮小されます。

See the Pen background-size2 by handywebdesign (@handywebdesign) on CodePen.

cover

coverを使うと、表示エリアに余白を残さないように画像が拡大縮小され、拡大縮小によって隠れる部分は切り取られます。

See the Pen background-size3 by handywebdesign (@handywebdesign) on CodePen.

px

See the Pen background-size4 by handywebdesign (@handywebdesign) on CodePen.


pxで長さを指定する時は、横・縦の順に数値を指定します。試しに横200px、縦100pxで指定してみましたが比率が崩れてちょっと潰れた写真になってしまいました。

片方だけ数値を指定して、比率は保持したいという時は以下のようにautoと組み合わせると実装可能です。

See the Pen background-size5 by handywebdesign (@handywebdesign) on CodePen.

%

%(パーセント)での指定も、pxと同様にautoと組み合わせると比率を保持した状態で%指定で背景画像のサイズを指定できます。

See the Pen background6 by handywebdesign (@handywebdesign) on CodePen.

background-sizeを使うと背景画像のサイズを操作できる!

最近は背景全体に画像を拡大させて表示するようなデザインのサイトが増えてきていますが、そういう時にbackground-sizeを使うと非常に便利です。

様々なデバイスに背景画像をうまく適応させることができるので、ぜひbackground-sizeの使い方を覚えておくと役立ちますよ。

というわけでCSSのbackground-sizeの使い方についてでした。