[CSS] 背景画像をフルスクリーン表示（画面いっぱいに！）＋デザインサンプル5選。

2023年5月6日

Contents

1. 背景画像(background-image)をCSSでブラウザ全体にフルスクリーン全画面表示する。
2. サイトの背景(htmlのbody部分)に画像(background-image)を設定するCSSコード。
3. 背景画像全画面表示で訪問者を魅了するCSSデザインスニペット5選。

背景画像(background-image)をCSSでブラウザ全体にフルスクリーン全画面表示する。

画像や動画をウェブサイトの背景に設定してfull screen表示するサイト・サービスも増えてきました。非常にダイナミックな魅せるデザインでインパクトがあり素敵ですね。

画像を画面サイズいっぱいに広げると、サイトの華やかさが一段上がります。

実は背景画像(background-image)はCSSで簡単に設定できます。本記事ではサイトの背景に画像を設定する方法と、参考になるデザインサンプルについてまとめています。

サイトの背景(htmlのbody部分)に画像(background-image)を設定するCSSコード。

最初にCSSのコードを記載します。

CSSソースコード　※ダブルクリックでコピペできます

body {
  background: url(test.jpg) no-repeat center center fixed #C0C0C0;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

body {

background:url(test.jpg)no-repeatcentercenterfixed#C0C0C0;

-webkit-background-size:cover;

-moz-background-size:cover;

-o-background-size:cover;

background-size:cover;

}

最初の「background」の部分で背景画像の設定をしています(htmlのbodyの部分に設定してください)。

urlの部分に背景画像に設定する画像を指定します(https://～の形式でも指定可能)。その後のオプションで「リピートの有無」「表示位置」などを設定しています。最後のカラーコードは背景画像が表示されない場合に出力される色となります。自サイトのカラーに近い色を設定しておくことが推奨されます。

まとめて書いていますが、background-image、background-position、background-repeat、background-attachmentに分けて記述することも可能です。

さらに、タブレット・スマホで見た際(横幅が狭い場合)にも自動調整してくれるように、「background-size」に「cover」を設定します。background-sizeにはpx指定、%指定、auto、contain、coverなどが指定できますが、フルスクリーン表示でブラウザにピッタリと収まるように表示するには「cover」の設定が必要です。autoでは画像の縦横比が崩れてしまいますし、containだと縦横比は維持されますが余白が出来てしまいます。

うまく設定出来れば、以下のようになります。スマホだと画像によっては横部分の見切れが大きくなってしまいますので、その場合は横幅サイズで判定して画像を変えるしかありません。