ZeroPlus Media > Web制作 > HTML/CSS > 【HTML】背景画像を表示する方法とimgタグとbackgroundの使い分けについて解説

【HTML】背景画像を表示する方法とimgタグとbackgroundの使い分けについて解説

HTML/CSS

2024/01/30

2024/02/02

この記事では、「背景画像を表示する方法とimgタグとbackgroundの使い分け」について解説します。

背景画像を設定する方法としては、

backgroundプロパティ（CSS）を使う方法
imgタグ（HTML）を使う方法
background属性を使う方法（非推奨）

があります。

状況にあった方法で背景画像を設定しましょう。

この記事で身につく内容

imgタグとbackgroundプロパティの使い分けがわかる
background属性の使い方がわかる

プログラミング学習でこのような経験はありませんか？

目標に向けて何を学べば良いかわからない
調べても解決策が見つからない
現場レベルのスキルが身につくのか不安

これらの悩みは、学習環境を整えることで全て解決することができます。

ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。

なんでも相談できる専属メンター
いつでも技術相談ができるプロ講師
元IT企業CTO監修のカリキュラム

条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。

少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。

今すぐZeroPlus Gateの詳細を見る

CSSで背景画像を表示する方法
imgタグで背景画像を表示する場合
imgタグとbackgroudプロパティ（CSS）の使い分け
- 文章の内容的に必要不可欠な画像はimgタグ
- 装飾目的に使用する画像はbackgroundプロパティ
HTMLのbackground属性で背景画像を表示する方法（非推奨）
まとめ：background属性は非推奨

CSSで背景画像を表示する方法

CSSで背景画像を表示するには、以下のように指定します。

<body>
  <div class="l-container">
    <div class="p-fv">
      <h1 class="p-fv__copy">キャッチコピー</h1>
    </div>
  </div>
</body>

.p-fv {
  width: 100%;
  height: 800px;

  /* 背景画像を表示 */
  background-image: url(dummy.png);

  position: relative;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 28px;
  padding-right: 28px;
}

.p-fv::before {
  content: "";
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .5);
  position: absolute;
  top: 0;
  left: 0;
}

.p-fv__copy {
  position: relative;
  z-index: 10;
  color: #fff;
  display: flex;
  align-items: center;
  font-size: 56px;
  font-weight: bold;
}

表示結果

CSSでは、以下のプロパティで背景画像に対して、位置・サイズ、繰り返し表示の有無などを設定することができます。

background-repeat: no-repeat; /* 背景画像を繰り返し表示させない */
background-size: cover; /* 背景画像を全画面表示 */
background-position: center; /* 背景画像の表示位置を中央に */

CSSで背景画像を表示する詳しいやり方は、以下の記事で解説しています。

【CSS】background-imageを使いこなす！背景画像の調整方法を解説　

imgタグで背景画像を表示する場合

HTMLのimgタグを使って背景画像として表示することもできます。

以下のコードを見てみましょう。

  <div class="l-container">
    <div class="p-fv">
      <div class="p-fv__img">
        <img src="dummy.png" alt="メイン画像" width="1000" height="800">
      </div>
      <h1 class="p-fv__copy">キャッチコピー</h1>
    </div>
  </div>

.p-fv {
  width: 100%;
  height: 800px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 28px;
  padding-right: 28px;
}

.p-fv::before {
  content: "";
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .5);
  position: absolute;
  top: 0;
  left: 0;
}

.p-fv__copy {
  position: relative;
  z-index: 10;
  color: #fff;
  display: flex;
  align-items: center;
  font-size: 56px;
  font-weight: bold;
}

.p-fv__img {
  width: 100%;
  height: inherit;
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
}

.p-fv__img img {
  height: 100%;
  object-fit: cover;
}

表示結果

基本的には背景画像はCSSで表示するのが一般的ですが、上記のようにimgタグを背景画像として表示することができます。

imgタグで背景画像として設定するケースとして、例えばWordPressの管理画面から背景画像を自由に設定したい場合があります。

WordPressのカスタムフィールドという機能を使用して、画像のパスの部分にWordPressのテンプレートタグを埋め込んで、管理画面から画像を変更できるようにすることができます。

CSSの場合は管理画面からの画像変更ができないため、WordPressの管理画面から背景画像を変更したい場合はimgタグで背景を設定するといいでしょう。

imgタグとbackgroudプロパティ（CSS）の使い分け

背景画像、アイコン・コンテンツの画像など、それぞれimgタグとCSSのbackgroundプロパティのどちらで記述するべきか悩むことがあると思います。

どのように使い分けるか、以下のように考えるといいでしょう。

imgタグ：文章やサイトの内容的に、必要不可欠な画像
backgroundプロパティ：装飾目的に使用する画像

文章の内容的に必要不可欠な画像はimgタグ

imgタグは、altタグを使って代替テキストを記述するので、文章やサイトに必要な画像を指定するときに使います。

<img src="dummy.png" alt="代替テキスト" width="1000" height="800">

例えば、駅からお店までの道を伝えるときは、文章だけでなくマップの画像がないと場所のイメージができません。この場合、マップの画像はサイトの情報として必要な画像なので、imgタグで表示させます。

装飾目的に使用する画像はbackgroundプロパティ

backgroundプロパティでは、装飾的に使う画像を指定します。

装飾目的の画像とは具体的には、次のような画像です。

背景画像：背景がなくてもサイトの情報に影響はない
テキストの脇にあるアイコン画像：アイコン画像がなくてもサイトの情報に影響はない

背景画像もテキストの脇にあるアイコン画像も、仮になかったとしても情報として不足はないため、必須の画像とはいえません。そのため、これらの画像はbackgroundプロパティで指定しても問題ないでしょう。

ただし「WordPressで管理画面から背景画像やアイコンなどを動的に変更したい」という場合には、前述したimgタグで記述する必要があります。

HTMLのbackground属性で背景画像を表示する方法（非推奨）

HTMLのみで背景に画像を表示する方法として、background属性を使用する方法もあります。

下記のようにbodyタグにbackgroud属性を付与し、画像を指定します。

<body background=“背景画像のURL”>

~

</body>

例えば以下のように指定できます。

<!-- bodyタグにbackground属性 -->
<body background="dummy-mini.png">
  <div class="l-container">
    <div class="p-fv">
      <h1 class="p-fv__copy">キャッチコピー</h1>
    </div>
  </div>
</body>

.p-fv {
  width: 100%;
  height: 800px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 28px;
  padding-right: 28px;
}

.p-fv::before {
  content: "";
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .5);
  position: absolute;
  top: 0;
  left: 0;
}

.p-fv__copy {
  position: relative;
  z-index: 10;
  color: #fff;
  display: flex;
  align-items: center;
  font-size: 56px;
  font-weight: bold;
}

表示結果