background-sizeで背景画像をレスポンシブ対応する方法

  • 2016.11.28
  • CSS

CSSの background-size プロパティは、背景画像のサイズを指定できます。
表示領域のサイズに合わせて背景画像が拡大、縮小されるので、レスポンシブサイトの制作に役立ちます。
同じ画像をそれぞれの値で表示したサンプルを作成しました。

サンプルページ

background-size:cover; 縦横比を保持して、表示領域全体を覆うように背景画像を表示する
background-size:contain; 縦横比を保持して、表示領域に収まるように背景画像を表示する
background-size:値指定 auto; 横幅は指定した値、縦幅は元の比率を保持して自動で表示する
background-size:auto 値指定; 縦幅は指定した値、横幅は元の比率を保持して自動で表示する

IEは11以上の対応ですが、最近はレスポンシブの普及によりIEは11のみでOKという案件も増えてきてるので、積極的に使っていきたいところです。

表示領域全体を覆う background-size:cover;

img-backgroundsize-cover
background-size:cover; は縦横比を保持したまま表示領域全体を背景画像で覆うように拡大、縮小します。
画像で全体を埋めたい時に使えます。

background:#ddd url(image.jpg) no-repeat center center;
background-size:cover;

表示領域に収める background-size:contain;

img-backgroundsize-contain
background-size:contain;は縦横比を保持したまま、表示領域に収まるように背景画像を拡大、縮小します。
背景画像の全体を見せたい時に使えます。

background:#ddd url(image.jpg) no-repeat center center;
background-size:contain;

横幅を指定して縦幅は自動にする background-size:値指定 auto;

横幅の値を指定する方法です。縦幅は元の比率を保持して自動で表示します。
%指定で可変にしたり、px指定で固定にも出来ます。

background:#ddd url(image.jpg) no-repeat center center;
background-size:70% auto;

縦幅を指定して横幅は自動にする background-size:auto 値指定;

縦幅の値を指定する方法です。横幅は元の比率を保持して自動で表示します。
こちらも%指定で可変にしたり、px指定で固定にも出来ます。

background:#ddd url(image.jpg) no-repeat center center;
background-size: auto 500px;

サンプルページ