写真1枚を背景画像としてブラウザの画面(ウインドウ)全面に広げる方法

解像度の高い写真など「1枚の大きな画像」を、ブラウザの画面(ウインドウ)全体に背景画像として掲載したいと思ったことはありませんか? ブラウザのウインドウサイズに関係なく、1枚の写真が縦横比を維持したままの状態で必ず画面全体に広がる下図のようなデザインです。

1枚の写真を背景画像としてブラウザの描画領域全面に広げる方法

1枚の背景画像を、ブラウザの画面(ウインドウ)全面に広げる方法
※左右どちらの表示例でも、ウインドウの全面を背景画像が覆っている


閲覧者によってブラウザの表示面積や縦横比は様々ですから、このように写真を背景画像として掲載するためには、どんなウインドウサイズであってもぴったり全面に広がるように自動調整できる仕組みが必要です。しかしスクリプトなどは一切不要で、HTMLソース上の工夫も特に必要なく、CSS(スタイルシート)を記述するだけで実現できる簡単な方法があります。

横幅いっぱいに広げるのではなく、画面(ウインドウ)全面を覆う方法

「横幅いっぱいに広げる」方法(以前の記事で解説)では、描画領域の全面を覆えるわけではない

「横幅いっぱいに広げる」方法(以前の記事で解説)では、描画領域の全面を覆えるわけではない

これは、記事「ウインドウ幅に合わせて画像サイズを変化させる方法」で解説している方法とは異なります。その記事で解説した方法は、「画像の横幅」を「描画領域の横幅」に合わせる方法なので、ウインドウの上下方向にも画像が広がるわけではありません。

本記事でご紹介するのは、下図のように左右だけでなく上下にも限界まで広がって、ブラウザのウインドウ全面を覆うように背景画像を自動で拡大・縮小させる方法です。縦横比は維持した状態で拡大・縮小されますので、画像が歪むことはありません。

ブラウザのウインドウ(描画領域)の全面を背景画像で覆えるように、背景画像の表示サイズが自動調整される

ブラウザの画面(ウインドウ)の全面を背景画像で覆えるように、背景画像の表示サイズが自動調整される
(左上) 「横長のウインドウ」の全面を満たすように、横幅一杯に表示
(右下) 「縦長のウインドウ」の全面を満たすように、高さ一杯に表示


ブラウザの画面(ウインドウ)の縦横比と、背景画像の縦横比が一致しない場合には、上図のように背景画像の上下か左右のどちらかが見えなくなります。その代わり、必ず画面の全面を覆うように背景画像が表示されます。


 

背景画像にCSS3のbackground-sizeプロパティを使えば簡単

CSS3で新たに追加されたbackground-sizeプロパティを使えば、1枚の背景画像を描画領域の全面に広げて表示する装飾も簡単に作れます。下記のように値として「cover」を指定すると、1枚の背景画像がウェブページの背景全面を覆うように、縦横比を維持した状態で自動的に拡大・縮小して表示されます。
background-size: cover;

とはいえ上記の記述1つでは不十分で、もう少しCSSを追記する必要があります。例えば、スクロール時に背景画像が動かないよう固定したり、画像の端が切れる場合に画像のどの部分を優先的に表示するかを指定したり……などです。特に背景画像の固定は必須です(理由は後述)。

今回はこのように、1枚の写真を背景画像としてブラウザの画面(ウインドウ)全面に広げて表示するためのCSSソースの書き方をご紹介いたします。

レスポンシブWebデザインで、無駄に大きな画像を読ませなくする

1枚の写真をブラウザの全画面に広げて表示したい場合は、拡大された画像が粗く見えてしまわないように大きめの(=解像度の高い)写真を用意しておきたいものです。しかし、大きい写真を1枚しか用意しない場合は、小型端末などで無駄に大きな画像を読み込ませることになってしまうため、読み込み速度が遅くなる要因になります。

無駄に大きな画像を読み込まずに済むよう、大中小3種類の写真を用意しておき、レスポンシブWebデザインの記述方法を使って、適切に切り替えるのが望ましい

無駄に大きな画像を読み込まずに済むよう、大中小3種類の写真を用意しておき、レスポンシブWebデザインの記述方法を使って、適切に切り替えるのが望ましい


そうならないよう、レスポンシブWebデザインの記述方法も併用して、アクセス者の閲覧環境に合致した画像ファイルを自動的に選択して読み込めるようにする方法も併せて解説しています。


 
それでは早速、1枚の写真を背景画像としてブラウザの画面(ウインドウ)全面に広げるCSSソースの書き方を見ていきましょう。