更新日: 2023 / 04 / 11

HTMLで背景画像を全画面にしたり透過させる方法を事例と合わせて解説

カテゴリー: HTML&CSS 入門ガイド

HTMLでCSSを使って背景画像を全画面表示したり、透過させたりする方法を実際の事例と合わせて紹介します。

背景画像はメインビジュアルなどの重要な場所で使われることが多く、全画面以外にもサイズを変えたりすることもあります。

実際にWebサイトで背景画像が使われている事例と合わせて実装方法を紹介します。

  1. HTMLで背景画像を作る基本的な方法

    1. background-imageで表示したい背景画像を指定する
    2. background-repeatで繰り返し表示される背景画像を制御する
    3. background-sizeで画像を拡大表示する
    4. background-positionで画像の表示位置を調整する
  2. 背景画像を全画面表示したい

  3. 背景画像を透過させたい

  4. 背景画像のサイズを変更したい

  5. 背景画像が表示されない問題を解決したい

    1. 幅と高さの指定忘れ
    2. 擬似要素を使う場合のCSSの記述ミス
  6. まとめ

HTMLで背景画像を作る基本的な方法

まずはHTMLで背景画像を作る基本的な方法をまとめておきます。

HTMLタグに背景画像を表示するためにはCSSプロパティのbackground-imagebackground-repeatなどを使用します。

  • background-image: 画像のURLを指定する
  • background-repeat: 背景画像の繰り返しの指定
  • background-size: 背景画像のサイズを指定
  • background-position: 背景画像の位置を指定

それぞれ詳しく紹介します。

background-imageで表示したい背景画像を指定する

HTMLタグは次のようにシンプルなものにしておきます。実際には見出しやテキストやボタンなどが入っている場合があります。

<div class="bg-image">
  背景画像をセット
</div>

CSSの効果を1つ1つ確認していきます。まずはbackground-imageで背景画像を指定します。

.bg-image {
  background-image: url('https://unsplash.it/320/210');
}

結果は次のようになります。

HTMLで背景画像を作る基本的な方法 HTMLタグに背景画像を設定する

細長くなっているのはHTMLにテキストしかコンテンツが入っていないためです。背景画像は指定した画像の大きさに関係なく、HTML要素の高さで表示されます。

background-repeatで繰り返し表示される背景画像を制御する

少し高くして画像全体を表示できるようにします。

.bg-image {
  height: 400px;
  background-image: url('https://unsplash.it/320/210');
}

結果は次のようになります。

HTMLで背景画像を作る基本的な方法 背景の高さを調整する

今度は同じ画像が複数並んで表示されています。これは背景画像として指定した画像のサイズが、横幅320px、高さ210pxでHTMLの要素より小さいためです。

背景画像がHTMLの要素より小さいと繰り返し表示されます。繰り返しをなくすためにbackground-repeatを使います。

.bg-image {
  height: 400px;
  background-image: url('https://unsplash.it/320/210');
  background-repeat: no-repeat;
}

結果は次のようになります。

HTMLで背景画像を作る基本的な方法 背景の高さを調整する

background-sizeで画像を拡大表示する

繰り返しはなくなったのですが、画像サイズがHTML要素より小さいため、左上に表示されてしまっています。

HTML要素に合わせて拡大表示するためにbackground-sizeを使います。

.bg-image {
  height: 400px;
  background-image: url('https://unsplash.it/320/210');
  background-repeat: no-repeat;
  background-size: cover;
}

結果は次のようになります。

HTMLで背景画像を作る基本的な方法 背景の高さを調整する

background-sizeを使うことで背景画像のサイズを変更できます。ここでは横幅と高さが埋まるようにcoverを指定しています。

background-positionで画像の表示位置を調整する

この場合右端が切れてしまうのでもし右端を表示させたい場合はbackground-positionrightを指定すれば右側が表示されます。

.bg-image {
  height: 400px;
  background-image: url('https://unsplash.it/320/210');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: right;
}

この場合右側が表示されても左側が切れることになります。

背景画像の基本的な表示方法はこの4つのプロパティで行えます。それぞれの役割を覚えておけば全画面やサイズの変更も簡単にできるようになります。

ここからは実際によくある背景の実装方法を事例と合わせて紹介します。

背景画像を全画面表示したい

背景画像を全画面表示するためには、画像のサイズが横幅も高さも100%にする必要があります。

実際のWebサイトではメインビジュアルに使われていることが多く、ロゴやグローバルナビゲーションの後ろに回り込むように画像が表示されます。

背景画像を全画面表示したい 背景の高さを調整する

このような背景画像を実装するには次のようなCSSコードを書きます。

<div class="bg-full">
  <!-- HTML省略 -->
</div>
.bg-full {
  width: 100%;
  height: 100vh;
  background-image: url('https://unsplash.it/800/500');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: right;
}

結果は次のようになります。height100vhを指定すると画面の高さ100%で表示できます。

背景画像を全画面表示したい 背景の高さを調整する2

背景画像を透過させたい

画像の上に文字を置くとどうしても文字が見にくくなることがあります。

そのような場合に背景画像を透過させることで文字を見やすくすることができます。

背景画像を全画面表示したい 背景画像を透過させたい

コンテンツを透過させるにはopacityを使えばいいので、背景もopacityで半透明にすることができます。

<div class="bg-transparent">
  <h1>キャッチコピー</h1>
</div>
h1 {
  text-align: center;
}
.bg-transparent {
  opacity: 0.3;
  padding: 100px 0;
  width: 100%;
  background-image: url('https://unsplash.it/800/500');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: right;
}

結果はこちらのようになります。背景は半透明になっているのですが、文字まで半透明になってしまっています。

背景画像を全画面表示したい 背景画像を透過させたい2

div要素にopacityをかけたのでその中にある文字も半透明になっています。このエラーを修正するには、擬似要素を使用します。

.bg-transparent {
  position: relative;
  padding: 100px 0;
}
.bg-transparent::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0.3;
  width: 100%;
  height: 100%;
  background-image: url('https://unsplash.it/800/500');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: right;
}

結果はこのようになります。擬似要素を使うことで背景だけを透過させることができます。擬似要素を使う場合はcontentpositionの設定を忘れないようにしましょう。

背景画像を全画面表示したい 背景画像を透過させたい3

背景画像のサイズを変更したい

背景画像のサイズを変更することで文字が重なるようなモダンなデザインを作ることができます。

背景画像を全画面表示したい 背景画像のサイズを変更したい

実装方法はいくつかありますが、ここでは画像部分を背景画像として実装する方法を紹介します。

先ほどと同じように擬似要素を使って背景画像を設定します。

<div class="bg-size">
  <div class="content-box">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas, cumque voluptate sit praesentium adipisci fuga id possimus. Reiciendis amet perferendis, nisi fugit.</p>
  </div>
</div>
.bg-size {
  position: relative;
  padding: 50px 0;
}
.bg-size::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 70%;
  height: 70%;
  background-image: url('https://unsplash.it/800/500');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: left;
  z-index: -1;
}
.content-box {
  padding: 40px;
  width: 300px;
  height: 200px;
  margin-left: auto;
  background-color: #f4f4f4;
}

結果は次のようになります。擬似要素を使ってwidthheightの値でサイズを調節し、z-indexで背後に回り込ませています。

背景画像を全画面表示したい 背景画像のサイズを変更したい2

この方法ではスマホで表示する際にサイズやレイアウトを再調整する必要があります。

背景画像が表示されない問題を解決したい

さいごに背景画像を設定したのに何も表示されない場合に考えられる原因と対策を紹介します。

背景画像が表示されない原因は以下のようなものが考えられます。

  • URLの書き間違い
  • 指定したパスの位置に画像がない
  • CSSで上書きされている
  • 幅と高さの指定忘れ
  • 擬似要素を使う場合のCSSの記述ミス

上3つについては「HTMLで画像が表示されない場合の原因と修正方法」でまとめています。下2つについてそれぞれ詳しく解説します。

幅と高さの指定忘れ

このページの最初の方にも書いた通り、背景画像を表示する場合は幅と高さが必要です。

擬似要素を使う場合に限らず忘れず設定しておきましょう。

.bg {
  width: 100%;
  height: 100%;
}

擬似要素を使う場合のCSSの記述ミス

::afterなどの擬似要素を使う場合はcontentpositionなどのプロパティも合わせて設定しておく必要があります。

こちらも忘れずに設定しておくようにしましょう。

.bg-size::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 70%;
  height: 70%;
  background-image: url('https://unsplash.it/800/500');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: left;
  z-index: -1;
}

まとめ

このページでは背景画像の表示方法とよくある実装パターンについて紹介しました。

メインビジュアルだけでなくさまざまなコンテンツでも使われるテクニックなので使いこなせるようになっておくとイケてるエンジニアになれます。

背景画像ではなく背景色の付け方やグラデーションの使い方についてはHTMLとCSSで背景色をつける方法で紹介しているのでこちらも合わせてご覧ください。