[CSS]背景画像をブラウザいっぱいに表示するシンプルな最新テクニック

Post on:2014年7月2日

背景画像をブラウザいっぱいに表示するスタイルシートのシンプルなテクニックを紹介します。

デスクトップだけでなく、スマフォやタブレットにも対応、しかもたった一行なのでスニペットに加えておくと便利です。

サイトのキャプチャ

Responsive Full Background Image Using CSS
Responsive Full Background Image Using CSS -GitHub

デモ

デモでは大きな画像を背景に使い、その上にコンテンツを表示しています。

デモのキャプチャ

デモページ

表示幅を変更しても、背景画像は天地左右の中央にしっかり表示されます。

デモのキャプチャ

デモを幅1,200pxで表示

デモのキャプチャ

デモを幅780pxで表示

デモのキャプチャ

デモを幅480pxで表示

コンセプト

「background-size」をビューポート全体をカバーするために使う

「background-size」はレスポンシブ対応にする時に非常に有効なプロパティです。値に「cover」を使うことで、背景画像を相対的に自動で調整します。

※IE8以下はサポートしていませんが、後述のスクリプトを使用するとbackground-sizeが機能するようになります。

「Media Queries」をスマフォ対策として使う

スマフォなどの小さいサイズのスクリーン用にMedia Queriesを使って、小さいサイズの画像ファイルを使うことができます。もっともこれはオプションで、このテクニックはこれなしで機能します。
デモで使っている画像ファイルは5,500x3,600pxで、ファイルサイズは1.7MBです。デスクトップのほとんどのワイドスクリーンはこのサイズでカバーできます。しかし、スマフォなどには優しくありません。スマフォを考慮するのであれば、Media Queriesを使ったオプションでの実装も検討してください。

実装

HTML

必要最小限のHTMLで、コンテンツは自由に配置できます。

<!doctype html>
<html>
<body>
  コンテンツ
</body>
</html>

ブラウザのビューポート全体をカバーするように画像を配置するのは、bodyに背景画像として表示します。このテクニックはbodyだけでなく、div, article, form などのブロックレベル要素にも利用することができます。

CSS

背景を表示するために、bodyにスタイルシートを定義します。

body {
  /* 画像ファイルの指定 */
  background-image: url(images/background-photo.jpg);
  
  /* 画像を常に天地左右の中央に配置 */
  background-position: center center;
  
  /* 画像をタイル状に繰り返し表示しない */
  background-repeat: no-repeat;
  
  /* コンテンツの高さが画像の高さより大きい時、動かないように固定 */
  background-attachment: fixed;
  
  /* 表示するコンテナの大きさに基づいて、背景画像を調整 */
  background-size: cover;
  
  /* 背景画像が読み込まれる前に表示される背景のカラー */
  background-color: #464646;
}

ここで一番注目すべきは、「background-size: cover;」です。このプロパティと値の組み合わせは要素の幅と高さに対して画像を相対的に調整します。また、画像がビューポートの天地左右の中央に配置されるように「background-position: center center;」も忘れないように指定してください。

一行のスタイルシートで記述

上記はすべて「background」の指定のため、ショートハンドを使って短く記述できます。

body {
  background: url(background-photo.jpg) center center / cover no-repeat fixed;
}

このスタイルシートを使えば、画像ファイルのURLを変更するだけでOKです。

オプション：スマフォ対策

前述したように、スマフォやタブレットなどの小さいスクリーンサイズ用にはMedia Queriesを使って、より小さいサイズの画像を背景に表示することもできます。

@media only screen and (max-width: 767px) {
  body {
    background-image: url(images/background-photo-mobile-devices.jpg);
  }
}

スクリーンサイズが767px以下の場合は、別の小さいサイズの画像を指定します。

IE8以下にも対応したい

原文には記載がありませんでしたが、IE8以下は「background-size」に対応していません。でもIE8以下にも、いやIE6/7/8にも対応したい時は下記のスクリプトを使用すると、IE6/7/8でも利用できます。

スタイルシートのライセンスはCC0 1.0で、利用にあたっては個人でも商用でも無料で、許可を求める必要は一切ない、とのことです。

sponsors

top of page

©2024 coliss