ROCHAS

background-size:coverで背景画像をフルスクリーンにフィットさせたレスポンシブウェブデザイン

background-size: coverを使って、たった3行のCSSで背景画像をフルスクリーンにフィットさせる方法をご紹介します。 フルスクリーン表示もレスポンシブウェブデザインもFluidレイアウトであり、background-sizeプロパティによって背景画像の表示サイズが指定できる、という原理を利用して、簡単なデモを3つ作ってみました。スマートフォンにも対応、IE8以下でも許容範囲で対応しています。

1. ソースコード

html {
  min-height: 100%; /* html要素をウィンドウサイズにフィット */

  background:url('bg_image.jpg') no-repeat center; /*背景をhtml要素に表示*/

  background-size:cover; /* 背景画像をhtml要素にフィット */
}

Demoをウィンドウをリサイズしてみたり、スマートフォンのオリエンテーションを切り替えてみてください。背景画像のアスペクト比(縦横比)を保ちつつ、常にその画像1枚だけでウィンドウいっぱいに表示されています。

2. Demo

background-size: coverを使ったフルスクリーン表示

3. 解説

background-size:coverで表示した背景画像をhtmlにフィット

background-sizeは値に幅と高さをpxや%など数値や比率で指定する方法とcover containというキーワードで指定する方法があります。
なかでもcoverは優れもの。背景画像のアスペクト比(縦横比)を保ちつつ、常にその画像1枚だけでウィンドウいっぱいに表示させることができるのです。

min-height: 100%でhtml要素をウィンドウサイズにフィット

height: 100%ではなくmin-height: 100%を指定する理由は、背景画像の高さの最小値を維持することで、下に余白が生まれないようにするためです。
そうすることで heightが「window = html = background-imagesとなり、まるでviewportのような?役割を果たしてくれてるのです。

min-height: 100%の指定なしと指定ありの比較

no-repeat centerで背景画像をhtml要素に表示とIE対応

background-size非対応のIE8以下にはno-repeat centerと指定することで許容範囲な結果が得られます。 IE9以上対象であれば指定しなくても大丈夫です。それはbackground-size:coverは「常にその画像1枚だけで」という仕様から、repeatすることがなく、またbackground-positionの初期値がcenter topにあるためです。

4. background-sizeの仕様

background-size 背景画像の表示サイズを指定
適用要素 全ての要素
初期値 auto
値の継承 ×
auto 両方の値がautoの場合はオリジナルサイズで表示。幅または高さの一方だけの場合は画像のアスペクト比を保ったまま、もう一方に合わせたサイズとなる。
実数+単位 実数に単位を付けて、画像の幅と高さをスペース区切りで指定。
実数+% 背景画像の表示領域に対する割合で、画像の幅と高さをスペース区切りで指定。
contain 画像のアスペクト比を保ちつつ、常に背景画像の全体が表示される最大サイズで表示される。
cover 画像のアスペクト比を保ちつつ、常にその画像1枚だけで表示領域全体を覆う最小サイズで表示される。
inherit 親要素と同じ値にする。
ブラウザ対応 IE9~, Firefox, Chrome, Safari, Opera, iOS, Android, Opera Mini

CSS Backgrounds and Borders Module Level 3 | W3C

「背景画像の表示サイズを指定するプロパティ」であるbackground-sizeは、親要素に対しての%ではなく、あくまでも画像に対しての%であることに気が付きます。
img要素やdiv要素は%指定にするだけで可変になりますが、背景画像は%指定にしただけでは親要素やコンテンツに追随した可変レイアウトにはなりません。どちらかというと「背景画像に対する表示サイズの値や割合を指定するプロパティ」といったニュアンスでしょうか。この特性を理解しておくと、フルスクリーンに限らずレスポンシブデザインを構築していく上で、背景画像をどう扱っていいかが見えてくると思います。

フルスクリーン表示は迫力がありますね!JavaScriptを使わずして、しかもたった3行のCSSで実装できるのはとっても便利。 Demo2やDemo3のようにコンテンツをrgbaで透過すると背景画像が活きてくるし、奥行きも生まれるので、もしよかったら試してみてくださいね。