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

未経験でも安心!人気のプログラミングスクール

マンツーマン指導だから未経験からプログラミングが学べて高いコーディングスキルが身につく人気のテックキャンプ!

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

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

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

読み込みが遅くなるというデメリットもある

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

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

コーディング方法

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

css

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

サンプル

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

未経験でも安心!人気のプログラミングスクール

マンツーマン指導だから未経験からプログラミングが学べて高いコーディングスキルが身につく人気のテックキャンプ!

スタイルシート/CSS
スポンサーリンク
blogをフォローする
フロントエンジニア&コーダーのためのマテリアルブログ

コメント

タイトルとURLをコピーしました