背景画像を画面いっぱいに表示させるWEBサイトを作る

画面いっぱいに背景画像を使うメリット

少し前から画面いっぱいに背景画像を使ってインパクトを与えるWEBサイトが増えてきていると思います。

きれいなビジュアル画像を画面いっぱいに使うことで文字を使わずに画像でイメージを伝えたり印象を与えることができます。

インパクトや印象を与えることができる背景画像を使ったWEBサイトにできますがきれいで高画質かつ画像のサイズが大きくなればなるほどページの読み込みに時間がかかるというデメリットもあります。

最近では光回線ではなくモバイルwifiなど回線速度の安定しないものを使用している人も多いため画像の読み込みに時間がかかってしまうと離脱にもつながってしまうので注意が必要になります。

それでは背景画像を画面いっぱいに表示するコーディング方法になります。

body{
	background: url(XXX/XXX.jpg) no-repeat;
	background-size: cover;
	background-attachment: fixed;
	background-position: center center;
}

画像はbody要素に背景画像としてcssを使い表示させます。

background-size: cover;

background-attachment: fixed;

background-position: center center;

@media only screen and (max-width: 767px) {
	body{
		background: url(XXX/XXX.jpg);
	}
}

PCで表示させている画像をスマートフォンでも使用しようとすると容量も大きくサイズも大きいためスマートフォンではメディアクエリを使い別の画像を読み込ませるということもできます。

それでは背景画像を画面いっぱいに表示させたサンプルを紹介します。