HTML・CSSで背景画像を画面いっぱいに全画面表示する方法!

HTML・CSSで背景画像を画面いっぱいに全画面表示する方法について解説します。WEBサイトを作成する際、背景画像を画面いっぱいに全画面表示したいという時がよくあると思います。その方法をサンプルコード付きで、さらにレスポンシブ対応したものを紹介します。

コンテンツ [表示]

  1. 1HTML・CSSで背景画像を画面いっぱいに全画面表示させたい
  2. 2HTML・CSSで背景画像を画面いっぱいに全画面表示する方法
  3. 2.1解説
  4. 2.2実践的な使い方
  5. 3まとめ

HTML・CSSで背景画像を画面いっぱいに全画面表示させたい

WEBサイト制作している際、HTML・CSSで1枚の背景画像を画面いっぱいに全画面表示させたいというときがよくあると思います。

以下の項目でレスポンシブにも対応させた形でその方法をサンプルコード付きで解説します。

Photo byTemplune

HTML・CSSで背景画像を画面いっぱいに全画面表示する方法

まずはCSSのbackground-imageプロパティを用いた背景画像の表示方法について解説します。

ではサンプルコードを用いて挙動を見てみましょう。

このようにどの画面サイズに対しても背景画像がフィットしつつ、画面いっぱいに固定されていることが分かります。別ウィンドウでプレビューをみたい方はコチラから別ウィンドウで確認頂けます。

解説

まず任意の画像をbackground-imageに設定します。そして画像が画面幅いっぱいに広がるようにbackground-size: cover;width: 100%;height: 100vh;を設定します。

横幅いっぱいはwidth: 100%、そしてheight: 100vh;でどの画面サイズに対しても縦幅いっぱいに表示されます。

またどの画面サイズに対しても画像の中心が移るように、background-position: center;を設定しています。

画面サイズに応じて背景画像の縦横比を保つ方法

heightを固定している時は問題ないのですが、固定していないときには先ほど解説した方法では、画面サイズを変えたときに背景画像の縦横比が崩れてしまいます。

この時にサンプルコードの最後で指定した::beforeの擬似要素が必須になります。

背景画像をフルスクリーンで表示させる際も擬似要素を指定しておいた方が無難かと思われます。

実践的な使い方

よくデザインとして透過したオブジェクトを背景画像の上に貼り、その上に文字を置くことがあります。

では実際にサンプルコードを用いて挙動を見てみましょう。

別ウィンドウを開いて確認したい方はコチラから。

このように背景画像がフルスクリーンで表示され、その上に伝えたい文字があることでユーザーに対してインパクトを与えることができます。

まとめ

いかがでしたでしょうか?

こちらで紹介したHTML・CSSで背景画像を画面いっぱいに全画面表示する方法は、本当によく用います。

ぜひここで紹介した方法を用いて、WEBサイトを制作する際に使ってみてください。

Qumeru[クメル]ではプログラミング学習が出来るカリキュラムを7月31日までの期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひカリキュラムをお試し下さい!

関連記事

【期間限定】全カリキュラム無料で提供中!

Qumeru[クメル]ではプログラミング学習の全カリキュラムを7月31日まで期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひお試し下さい!

目次