CSS 画像を背景画面いっぱいに表示する

画像を背景画面いっぱいに表示するにはCSSのbackground-sizeを使えば実現できます。

background-sizeは背景画像の大きさを設定するCSSのプロパティ。背景画面いっぱいに表示する方法は要素の高さを設定してcoverを指定するだけ。画像の縦横比を崩すことなく、画像ができるだけ大きくなるよう拡大縮小します。

関連記事

• object-fitを使って画像を要素いっぱいに表示する

1.　背景画面いっぱいに拡大する

background-size: coverを指定します。
背景画像を画面いっぱいに拡大します。
画像が大きすぎてはみ出た場合は上下または左右のどちらかを切り取ります。

See the Pen
fullscreen Image (background-image) by kura (@kuranopen)
on CodePen.

HTML

<div class="hero"></div>

CSS

/* 前提 */

body{
  margin: 0;
  padding: 0;
}

/* 全画面表示CSS */

.hero {
  height: 100vh; /* 全画面表示 */
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  background-image: url(https://picsum.photos/id/237/960/540);
}

解説

1. height: 100vh;を追加します。要素の高さを画面最大まで大きくするCSSで、縦幅いっぱいまで要素が大きくなります。
2. background-size: cover;を追加します。縦横比は保持して背景画像が要素いっぱいまで表示されます。
3. background-image: url();はお好み画像を使用してください。

2.　切り取りなしで拡大する

background-size: containを指定します。
画像が切り取られることなく拡大されます。
拡大できなかった部分はは空きが生まれます。

See the Pen
by kura (@kuranopen)
on CodePen.

HTML

<div class="hero"></div>

CSS

/* 前提 */

body{
  margin: 0;
  padding: 0;
}

/* 全画面表示CSS */

.hero {
  height: 100vh; /* 要素を縦幅いっぱいにする*/
  background-size: contain; /*画像を拡大*/
  background-repeat: no-repeat;
  background-position: center center;
  background-image: url(https://picsum.photos/id/237/960/540);
}

解説

1. height: 100vh;を追加します。要素の高さを画面最大まで大きくするCSSで、縦幅いっぱいまで要素が大きくなります。
2. background-size: cover;を追加します。縦横比は保持し、画像を切り取ることなく背景画像が要素いっぱいまで表示されます。
3. background-image: url();はお好み画像を使用してください。

活用法

• フルスクリーンで全画面に画像とテキストを表示する

デザインを本で学びたい人向けの記事

初心者ノンデザイナーがこれからデザインを勉強するのにおすすめの本 4選