HTMLとCSSで全画面に背景画像を表示させる方法

Webデザインをする中で画面全体に背景画像を表示させるといったデザインにすることはよくあります。画像を大きく見せることで大きなインパクトを与えることができてWebサイトの印象からいろんなメッセージを使えることができます。

実際にHTMLとCSSでどのように構築していくのかというところですが、意外とシンプルなコードで実装することができます。

ここではHTMLとCSSで全画面に背景画像を表示させる方法をご紹介します。

レスポンシブWebデザインに対応した書き方でご説明していきます。

画面全体に背景画像を表示

Webサイトにアクセスした時のファーストビューをメインビジュアルとして、最初のセクションを「bg-01」としておきます。「bg-white」のブロックで白の透過背景でコンテンツを載せるように構築します。

HTML

<main>

  <section id="bg-01">
    <div class="section-conts">
      <div class="bg-white">
        <h2>Main Visual</h2>
        <p>background-image: url("../images/bg-01-〇〇.jpg");<br>
        background-size: cover;</p>
      </div>
    <div>
  </section>

  <section class="bg-c">
    <div class="section-conts">
      <div class="bg-white">
        <h2>SECTION 2</h2>
        <p>background: #eee;</p>
      </div>
    </div>
  </section>

  <section id="bg-02">
    <div class="section-conts">
      <div class="bg-white">
        <h2>SECTION 3</h2>
        <p>background-image: url("../images/bg-02-〇〇.jpg");<br>
        background-size: cover;<br>
        background-attachment: fixed;</p>
      </div>
    </div>
  </section>

  <section class="bg-c">
    <div class="section-conts">
      <div class="bg-white">
        <h2>SECTION 4</h2>
        <p>background: #eee;</p>
      </div>
    </div>
  </section>

</main>

4つのセクションを用意してみました。
Webページ全体でいくつかの魅せ方を構築していきます。
画面全体での背景画像の表示では、背景画像をセクションで固定するかスクロールで固定するかの2パターンでデザインしていこうと思いますので、そこはSECTION 3で違うデザインにしてみます。

続いて、CSSになります。

CSSはレスポンシブに対応するためにここではメディアクエリを使ってモバイルファーストで記述していきます。
デフォルトの指定が全デバイス対応のスタイルでmin-width:768pxからタブレット端末、PCから効くスタイルとします。

各セクションは要素の領域を画面全体になるように幅と高さをブラウザのビューポートのサイズに基づいて100とします。section-contsではレスポンシブ対応としてコンテンツを部分を見やすい幅に調整しています。
bg-cでは背景画像ではないセクションはbackground-colorで色を選択します。bg-whiteはコンテンツ部分としてわかりやすい背景に白透過とします。

CSS

main > section {
  width: 100vw;
  height: 100vh;
}

.section-conts {
  padding: 4%;
}

.bg-c {
  background: #eee;
}

.bg-white {
  background: rgba(255, 255, 255, .75);
  padding: 30px;
  display: inline-block;
}

/* 背景に画像 */
#bg-01 {
  background-image: url("../images/bg-01-sp.jpg");
  background-size: cover;
}

#bg-02 {
  background-image: url("../images/bg-02-sp.jpg");
  background-size: cover;
  background-attachment: fixed;
}

/*------------------------------------------------------
 Tablet ~
------------------------------------------------------*/
@media screen and (min-width:768px) {

  /* 背景に画像 */
  #bg-01 {
    background-image: url("../images/bg-01-pc.jpg");
  }

  #bg-02 {
    background-image: url("../images/bg-02-pc.jpg");
  }

}

背景画像の設定では、対象のセクションに対してbackground-imageを設定し、background-sizeプロパティを「cover」とすることで画像の縦横比は保持して、背景領域を完全に覆う最小サイズになるようにします。

bg-01はメインビジュアルとしてセクションのコンテンツの背景なのでWebページをスクロールすればセクションと一緒にスクロールされます。
そしてもう一つ、bg-02ではWebページをスクロールしても背景はそのまま固定するように指定しています。
background-attachmentプロパティを使って値を「fixed」とすることでスクロール時でも背景画像を固定することができます。

背景画像の縦横比によってPCとスマートフォンでの見え方が変わってくるので、メディアクエリを使って背景画像を切り替えています。デフォルトではスマートフォン用の縦長の画像（767×1334）を読み込ませ、タブレット端末以上の幅になった時にPC用の横長の画像を読み込ませています。

以上で画面全体に背景画像を表示させることができます。