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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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