【CSS】background-imageの使い方：サイズ・透過・レスポンシブ

2026年4月16日2026年5月6日

CSSのbackground-imageは、単なる壁紙の配置にとどまらず、サイズ調整やフィルター処理、アニメーションなど、Webデザインの質を左右するプロパティです。

本記事では、基本の指定方法から実務で必須となるレスポンシブ対応や応用テクニック、画像が表示されない時の解決策を解説します。

また、CSSに関するカテゴリーページから学びたい内容を決めたい人は、以下のCSSページをご確認ください。

CSS | Code Stock

background-image：画像の指定方法とimgタグとの違い

Webデザインにおいて、要素の後ろにテクスチャや写真を敷くテクニックは欠かせません。

「CSSで背景画像を追加するには？」や「画像を背景として使うには？」と検索して、このプロパティに辿り着く初心者の方も多いでしょう。

CSSで背景に画像を設定するには、background-imageを使用します。

特定の箱に画像を入れる、ページ全体に壁紙を敷くなど、目的に応じて背景画像の配置を行います。

ここでは、基本となるbackground-imageの使い方、通常の画像配置との違いについて解説します。

background-image

url()を使ったローカル・外部画像の読み込み
imgタグとbackground-imageの使い分け

url()を使ったローカル・外部画像の読み込み

背景画像を指定する際、基本となる構文がbackground-image: url("画像のパス");です。

画像パスの指定には、大きく分けてサーバーやパソコン内にある画像を読み込む方法と外部サイトの画像を読み込む方法の2種類があります。

注意すべき点は、「指定したはずの画像が画面に表示されない」というトラブルです。

これは画像パスにおける指定ミスが原因です。

特に実務では、CSSファイルをcssという専用フォルダの中に入れるのが一般的です。

この時、相対パスを使って画像を読み込む際、url("images/bg.jpg")と書くとエラーになります。

なぜならCSSファイルから見て画像フォルダは一つ上の階層にあるため、正しくはurl("../images/bg.jpg")と「../（一つ戻る）」を書かなければならないからです。

パスの迷子を防ぐため、実務ではドメインの直下から指定する絶対パスに近い書き方（例：url("/images/bg.jpg")）を採用することも多くあります。

🔗 url() を使った画像指定

外部画像
（External URL）

ローカル画像
（相対パスで指定）

/* 💡 外部URLの指定（https://〜から全て書く） */
.external-bg {
  background-image: url(“https://picsum.photos/400/200?random=1”);
}

/* 💡 ローカルファイル（相対パス）の指定 */
.local-bg {
  /* ⚠️注意：CSSファイルが「cssフォルダ」の中にある場合、
     「../」を使って一度上の階層に戻る必要があります */
  background-image: url(“../images/sample-bg.jpg”);
}

HTMLコード表示

<div class="bg-basic-wrapper">
  <div class="bg-basic-demo-area">
    <div class="bg-basic-box">
      <div class="bg-basic-label">🔗 url() を使った画像指定</div>
      
      <div class="bg-basic-visual">
        <div class="bg-basic-item external-bg">
          <p class="bg-basic-text">外部画像<br>（External URL）</p>
        </div>

        <div class="bg-basic-item local-bg">
          <p class="bg-basic-text">ローカル画像<br>（相対パスで指定）</p>
        </div>
      </div>

      <div class="bg-basic-code">
        /* 💡 外部URLの指定（https://〜から全て書く） */<br>
        <span class="bg-basic-hl-blue">.external-bg</span> {<br>
          <span class="bg-basic-hl-green">background-image: url("https://picsum.photos/400/200?random=1");</span><br>
        }<br><br>

        /* 💡 ローカルファイル（相対パス）の指定 */<br>
        <span class="bg-basic-hl-blue">.local-bg</span> {<br>
          <span class="bg-basic-hl-comment">/* ⚠️注意：CSSファイルが「cssフォルダ」の中にある場合、<br>
             「../」を使って一度上の階層に戻る必要があります */</span><br>
          <span class="bg-basic-hl-green">background-image: url("../images/sample-bg.jpg");</span><br>
        }
      </div>
    </div>
  </div>
</div>

CSSコード表示

.bg-basic-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}
.bg-basic-demo-area {
  display: flex;
  justify-content: center;
}
.bg-basic-box {
  background-color: #ffffff;
  border: 2px dashed #adb5bd;
  padding: 25px;
  width: 100%;
  max-width: 600px;
  border-radius: 4px;
}
.bg-basic-label {
  font-size: 15px;
  font-weight: bold;
  margin-bottom: 20px;
  color: #333;
}
.bg-basic-visual {
  display: flex;
  gap: 15px;
  margin-bottom: 20px;
}
.bg-basic-item {
  flex: 1;
  height: 150px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #ced4da;
  
  /* 画像を見やすくするための共通設定 */
  background-size: cover;
  background-position: center;
  position: relative;
}
/* 半透明の黒い膜をかけて文字を読みやすくするテクニック */
.bg-basic-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  border-radius: 8px;
}
.bg-basic-text {
  position: relative;
  color: #ffffff;
  font-weight: bold;
  font-size: 14px;
  text-align: center;
  margin: 0;
  z-index: 1;
}

/* ★ パターン1：外部URL */
.external-bg {
  background-image: url("https://picsum.photos/400/200?random=1");
}
/* ★ パターン2：ローカル画像（デモ用にダミー画像を使用） */
.local-bg {
  background-image: url("https://picsum.photos/400/200?random=2");
}

.bg-basic-code {
  background-color: #282c34;
  color: #abb2bf;
  padding: 15px;
  font-family: monospace;
  font-size: 13px;
  border-radius: 4px;
  line-height: 1.6;
  border-left: 4px solid #198754;
}
.bg-basic-hl-green {
  color: #98c379;
  font-weight: bold;
}
.bg-basic-hl-blue {
  color: #61afef;
  font-weight: bold;
}
.bg-basic-hl-comment {
  color: #6c757d;
  font-style: italic;
}

imgタグとbackground-imageの使い分け

Webデザインにおいて、「背景画像か、imgタグか」の選択は、SEOとアクセシビリティの観点で重要です。

この「背景要素と背景画像の関係性」を理解しないままサイトを作ると、検索順位やユーザー体験に悪影響を及ぼします。

HTMLの<img>タグを使うべき時
ロゴ、商品写真、記事のアイキャッチ画像など意味を持つコンテンツであり、印刷時に表示させたい場合。
alt属性で画像の説明を書きましょう。
CSSのbackground-imageを使うべき時
文字の背景のテクスチャ、ボタンのアイコン装飾、ヒーローエリアの雰囲気作りの壁紙など意味を持たない単なるデザイン装飾の場合。

⚖️ imgタグ vs background-image

⭕️ コンテンツとしての画像（imgタグ）

情報を持つ画像。alt属性があり、Googleや読み上げソフトに認識されます。印刷時にも出力されます。

⭕️ 装飾としての画像（background-image）

背景のテクスチャ

単なるデザイン装飾。検索エンジンからは無視され、印刷時にはデフォルトで省かれます。

<!– 💡 意味のある画像は imgタグ –>
<img src=”product.jpg” alt=”商品名”>

<!– 💡 装飾用の画像は div と CSS –>
<div class=”decoration-box”>…</div>
.decoration-box {
background-image: url(“pattern.png”);
}

HTMLコード表示

<div class="bg-vs-wrapper">
  <div class="bg-vs-demo-area">
    <div class="bg-vs-box">
      <div class="bg-vs-label">⚖️ imgタグ vs background-image</div>
      
      <div class="bg-vs-visual">
        <div class="bg-vs-section">
          <p class="bg-vs-title">⭕️ コンテンツとしての画像（imgタグ）</p>
          <div class="bg-vs-img-container">
            <img src="https://picsum.photos/400/200?random=3" alt="新作のスマートフォンケース" class="bg-vs-img-tag">
          </div>
          <p class="bg-vs-desc">情報を持つ画像。alt属性があり、Googleや読み上げソフトに認識されます。印刷時にも出力されます。</p>
        </div>

        <hr class="bg-vs-divider">

        <div class="bg-vs-section">
          <p class="bg-vs-title">⭕️ 装飾としての画像（background-image）</p>
          <div class="bg-vs-bg-container">
            <p style="color:#fff; font-weight:bold; position:relative; z-index:1; margin:0;">背景のテクスチャ</p>
          </div>
          <p class="bg-vs-desc">単なるデザイン装飾。検索エンジンからは無視され、印刷時にはデフォルトで省かれます。</p>
        </div>
      </div>

      <div class="bg-vs-code">
        <!-- 💡 意味のある画像は imgタグ --><br>
        <img src="product.jpg" <span class="bg-vs-hl-red">alt="商品名"</span>><br><br>

        <!-- 💡 装飾用の画像は div と CSS --><br>
        <div class="decoration-box">...</div><br>
        <span class="bg-vs-hl-blue">.decoration-box</span> {<br>
          <span class="bg-vs-hl-green">background-image: url("pattern.png");</span><br>
        }
      </div>
    </div>
  </div>
</div>

CSSコード表示

.bg-vs-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}
.bg-vs-demo-area {
  display: flex;
  justify-content: center;
}
.bg-vs-box {
  background-color: #ffffff;
  border: 2px dashed #adb5bd;
  padding: 25px;
  width: 100%;
  max-width: 600px;
  border-radius: 4px;
}
.bg-vs-label {
  font-size: 15px;
  font-weight: bold;
  margin-bottom: 20px;
  color: #333;
}
.bg-vs-visual {
  background-color: #f1f3f5;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
  border: 1px solid #dee2e6;
}
.bg-vs-section {
  margin-bottom: 15px;
}
.bg-vs-title {
  font-size: 13px;
  font-weight: bold;
  color: #0d6efd;
  margin-bottom: 10px;
  margin-top: 0;
}
.bg-vs-desc {
  font-size: 12px;
  color: #555;
  margin-top: 8px;
  line-height: 1.5;
}
.bg-vs-divider {
  border: none;
  border-top: 1px dashed #adb5bd;
  margin: 20px 0;
}

/* 1. imgタグのスタイル */
.bg-vs-img-container {
  width: 100%;
  border-radius: 8px;
  overflow: hidden;
}
.bg-vs-img-tag {
  width: 100%;
  height: 100px;
  object-fit: cover;
  display: block; /* img特有の下の隙間を消す */
}

/* 2. background-imageのスタイル */
.bg-vs-bg-container {
  width: 100%;
  height: 100px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  
  /* CSSで背景を指定 */
  background-image: url("https://picsum.photos/400/200?random=4");
  background-size: cover;
  background-position: center;
  position: relative;
}
.bg-vs-bg-container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.5);
  border-radius: 8px;
}

.bg-vs-code {
  background-color: #282c34;
  color: #abb2bf;
  padding: 15px;
  font-family: monospace;
  font-size: 13px;
  border-radius: 4px;
  line-height: 1.6;
  border-left: 4px solid #0d6efd;
}
.bg-vs-hl-green {
  color: #98c379;
  font-weight: bold;
}
.bg-vs-hl-blue {
  color: #61afef;
  font-weight: bold;
}
.bg-vs-hl-red {
  color: #e06c75;
  font-weight: bold;
}

imgタグの使い方を詳しく知りたい人は「【HTML】imgタグの使い方：src・altの使い分けや画像リサイズ・中央寄せ」を一読ください。

【HTML】imgタグの使い方：src・altの使い分けや画像リサイズ・中央寄せ

背景画像のサイズ調整とレスポンシブ対応

背景画像を指定しただけでは、画像が大きすぎて見切れたり、小さすぎて不自然に繰り返されたりします。

Webデザインにおいて、スマホやPCなどあらゆる画面幅に画像を調整するには、background-sizeのコントロールが不可欠です。

ここでは、実務で使うbackground-sizeプロパティの値、数値を使った指定方法について解説します。

背景画像のサイズ調整とレスポンシブ対応

画面幅いっぱいに表示する・収める
幅や高さを100%・数値で指定する

画面幅いっぱいに表示する・収める

背景のサイズ調整で使われるのが、coverとcontainという2つのキーワードです。

cover（隙間なく埋める）
どこが切り取られても問題ない風景や抽象的なテクスチャに使用します。
この時、background-position: center;を併用して、画像の中心を基準に切り取るのが実務の基本です。
contain（すべて見せる）
見切れてはいけない商品の全体像や文字が入ったバナー画像に使用します。
画像全体を箱の中にピッタリ収める代わりに、上下または左右に余白（隙間）ができる点に注意が必要です。

🖼 cover と contain の違い

背景画像エリア

【cover】箱を完全に覆い尽くすように画像を拡大します。はみ出した部分は切り捨てられます。

/* 💡 cover：ヒーローヘッダー（一番上の大きな画像）の定番 */
.hero-area {
  background-image: url(“image.jpg”);
  background-size: cover;
  background-position: center; /* 常に中央を基準にする */
  background-repeat: no-repeat;
}

/* 💡 contain：絶対に見切れてはいけないバナー等の定番 */
.banner-area {
  background-image: url(“banner.jpg”);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

HTMLコード表示

<div class="bg-size1-wrapper">
  <div class="bg-size1-demo-area">
    <div class="bg-size1-box">
      <div class="bg-size1-label">🖼 cover と contain の違い</div>
      
      <div class="bg-size1-visual">
        <div style="display:flex; gap:10px; margin-bottom:15px; justify-content:center;">
          <button id="bg1-btn-cover" class="bg-size1-btn bg-size1-btn-active">cover (隙間なし/見切れる)</button>
          <button id="bg1-btn-contain" class="bg-size1-btn">contain (隙間あり/全て見える)</button>
        </div>

        <div id="bg1-preview" class="bg-size1-preview cover-mode">
          <p class="bg-size1-text">背景画像エリア</p>
        </div>
        <p id="bg1-desc" class="bg-size1-desc">
          【cover】箱を完全に覆い尽くすように画像を拡大します。はみ出した部分は切り捨てられます。
        </p>
      </div>

      <div class="bg-size1-code">
        /* 💡 cover：ヒーローヘッダー（一番上の大きな画像）の定番 */<br>
        <span class="bg-size1-hl-blue">.hero-area</span> {<br>
          <span class="bg-size1-hl-green">background-image: url("image.jpg");</span><br>
          <span class="bg-size1-hl-red">background-size: cover;</span><br>
          <span class="bg-size1-hl-green">background-position: center;</span> /* 常に中央を基準にする */<br>
          <span class="bg-size1-hl-green">background-repeat: no-repeat;</span><br>
        }<br><br>

        /* 💡 contain：絶対に見切れてはいけないバナー等の定番 */<br>
        <span class="bg-size1-hl-blue">.banner-area</span> {<br>
          <span class="bg-size1-hl-green">background-image: url("banner.jpg");</span><br>
          <span class="bg-size1-hl-red">background-size: contain;</span><br>
          <span class="bg-size1-hl-green">background-position: center;</span><br>
          <span class="bg-size1-hl-green">background-repeat: no-repeat;</span><br>
        }
      </div>
    </div>
  </div>
</div>

CSSコード表示

.bg-size1-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}
.bg-size1-demo-area {
  display: flex;
  justify-content: center;
}
.bg-size1-box {
  background-color: #ffffff;
  border: 2px dashed #adb5bd;
  padding: 25px;
  width: 100%;
  max-width: 600px;
  border-radius: 4px;
}
.bg-size1-label {
  font-size: 15px;
  font-weight: bold;
  margin-bottom: 20px;
  color: #333;
}
.bg-size1-visual {
  background-color: #f1f3f5;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
  border: 1px solid #dee2e6;
  text-align: center;
}
.bg-size1-btn {
  background-color: #e9ecef;
  border: 1px solid #ced4da;
  padding: 8px 15px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
  font-weight: bold;
  color: #495057;
}
.bg-size1-btn-active {
  background-color: #0d6efd;
  color: #fff;
  border-color: #0d6efd;
}
.bg-size1-preview {
  width: 100%;
  height: 250px;
  border: 2px dashed #dc3545; /* 箱の境界線を分かりやすく */
  border-radius: 4px;
  background-color: #e9ecef;
  
  /* 背景画像の設定 */
  background-image: url("https://picsum.photos/600/400?random=10");
  background-position: center;
  background-repeat: no-repeat;
  
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-size 0.3s ease;
}
.bg-size1-preview.cover-mode {
  background-size: cover;
}
.bg-size1-preview.contain-mode {
  background-size: contain;
}
.bg-size1-text {
  background-color: rgba(0, 0, 0, 0.6);
  color: #fff;
  padding: 5px 15px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: bold;
}
.bg-size1-desc {
  font-size: 12px;
  color: #555;
  margin-top: 15px;
  line-height: 1.5;
}

.bg-size1-code {
  background-color: #282c34;
  color: #abb2bf;
  padding: 15px;
  font-family: monospace;
  font-size: 13px;
  border-radius: 4px;
  line-height: 1.6;
  border-left: 4px solid #0d6efd;
}
.bg-size1-hl-green {
  color: #98c379;
  font-weight: bold;
}
.bg-size1-hl-blue {
  color: #61afef;
  font-weight: bold;
}
.bg-size1-hl-red {
  color: #e06c75;
  font-weight: bold;
}

JavaScriptコード表示

setTimeout(() => {
  const btnCover = document.getElementById('bg1-btn-cover');
  const btnContain = document.getElementById('bg1-btn-contain');
  const preview = document.getElementById('bg1-preview');
  const desc = document.getElementById('bg1-desc');

  if(btnCover && btnContain && preview && desc) {
    btnCover.addEventListener('click', () => {
      btnCover.classList.add('bg-size1-btn-active');
      btnContain.classList.remove('bg-size1-btn-active');
      preview.classList.remove('contain-mode');
      preview.classList.add('cover-mode');
      desc.textContent = "【cover】箱を完全に覆い尽くすように画像を拡大します。はみ出した部分は切り捨てられます。";
    });

    btnContain.addEventListener('click', () => {
      btnContain.classList.add('bg-size1-btn-active');
      btnCover.classList.remove('bg-size1-btn-active');
      preview.classList.remove('cover-mode');
      preview.classList.add('contain-mode');
      desc.textContent = "【contain】画像全体が必ず箱の中に収まるように縮小します。上下左右に空白（余白）ができます。";
    });
  }
}, 100);

様々な要素に対するレスポンシブ対応について詳しく知りたい人は「【CSS】レスポンシブデザイン対応の基本：メディアクエリの書き方とパーツ別サンプル集」を一読ください。

【CSS】レスポンシブデザイン対応の基本：メディアクエリの書き方とパーツ別サンプル集

幅や高さを100%・数値で指定する

coverやcontainのような自動調整ではなく、画像サイズを幅100%にしたり、高さ100%、横幅50%などの具体的な数値でコントロールしたい場面もあります。

また、背景画像が表示されないというトラブルの多くは、「画像を入れる箱（div）に高さが指定されていない」ことが原因です。

背景画像自体は高さを持たないため、親要素にheightやmin-height（あるいは中のコンテンツによる高さ）がないと、高さ0となって見えなくなります。

数値を指定する場合は1つだけ（幅）にします。（例：background-size: 100% auto;と同じ意味になり、歪みません。）

画面幅を超えて画像が大きくなりすぎるのを防ぐには、画像を入れる箱の方にmax-widthを指定して制限をかけます。

📐 数値・%指定と画像の歪み

※違いを分かりやすくするため、「正方形の犬の画像」を「横長で平べったい箱」の背景に指定しています。

⭕️ 正解：幅だけを指定（100% / auto）

縦横比（プロポーション）が維持されるため、犬の顔は歪みません。（※箱に収まらない上下は自動で見切れます）

❌ 失敗：幅と高さを両方100%に指定

縦横比が完全に無視され、箱の形に合わせて犬がペチャンコに潰れて（歪んで）しまいます！

/* ⭕️ 正しい数値指定（横幅100%・高さは自動比率） */
.correct-box {
  background-image: url(“dog.jpg”);
  /* 幅だけを100%に指定（高さは自動でautoになる） */
  background-size: 100%;
  background-repeat: no-repeat;
  height: 120px; /* 箱の高さを指定 */
}

/* ❌ 恥ずかしいミス：縦横比を無視して潰れる */
.wrong-box {
  background-size: 100% 100%; /* 横も縦も100% */
}

HTMLコード表示

<div class="bg-size2-wrapper">
  <div class="bg-size2-demo-area">
    <div class="bg-size2-box">
      <div class="bg-size2-label">📐 数値・%指定と画像の歪み</div>
      
      <div class="bg-size2-visual">
        <p style="font-size:12px; color:#555; margin-bottom:15px; line-height:1.5;">
          ※違いを分かりやすくするため、「正方形の犬の画像」を「横長で平べったい箱」の背景に指定しています。
        </p>

        <div style="margin-bottom:25px;">
          <p style="font-size:13px; font-weight:bold; color:#198754; margin:0 0 5px 0;">⭕️ 正解：幅だけを指定（100% / auto）</p>
          <div class="bg-size2-correct"></div>
          <p style="font-size:11px; color:#666; margin-top:5px;">縦横比（プロポーション）が維持されるため、犬の顔は歪みません。（※箱に収まらない上下は自動で見切れます）</p>
        </div>

        <div>
          <p style="font-size:13px; font-weight:bold; color:#dc3545; margin:0 0 5px 0;">❌ 失敗：幅と高さを両方100%に指定</p>
          <div class="bg-size2-wrong"></div>
          <p style="font-size:11px; color:#dc3545; margin-top:5px; font-weight:bold;">縦横比が完全に無視され、箱の形に合わせて犬がペチャンコに潰れて（歪んで）しまいます！</p>
        </div>
      </div>

      <div class="bg-size2-code">
        /* ⭕️ 正しい数値指定（横幅100%・高さは自動比率） */<br>
        <span class="bg-size2-hl-blue">.correct-box</span> {<br>
          <span class="bg-size2-hl-green">background-image: url("dog.jpg");</span><br>
          <span class="bg-size2-hl-comment">/* 幅だけを100%に指定（高さは自動でautoになる） */</span><br>
          <span class="bg-size2-hl-green">background-size: 100%;</span> <br>
          <span class="bg-size2-hl-green">background-repeat: no-repeat;</span><br>
          <span class="bg-size2-hl-green">height: 120px;</span> /* 箱の高さを指定 */<br>
        }<br><br>

        /* ❌ 恥ずかしいミス：縦横比を無視して潰れる */<br>
        <span class="bg-size2-hl-blue">.wrong-box</span> {<br>
          <span class="bg-size2-hl-red">background-size: 100% 100%;</span> /* 横も縦も100% */<br>
        }
      </div>
    </div>
  </div>
</div>

CSSコード表示

.bg-size2-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}
.bg-size2-demo-area {
  display: flex;
  justify-content: center;
}
.bg-size2-box {
  background-color: #ffffff;
  border: 2px dashed #adb5bd;
  padding: 25px;
  width: 100%;
  max-width: 550px;
  border-radius: 4px;
}
.bg-size2-label {
  font-size: 15px;
  font-weight: bold;
  margin-bottom: 20px;
  color: #333;
}
.bg-size2-visual {
  background-color: #f1f3f5;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
  border: 1px solid #dee2e6;
}

/* 共通の背景設定（歪みを強調するため、正方形の画像を平べったい箱に入れる） */
.bg-size2-correct, .bg-size2-wrong {
  width: 100%;
  height: 100px; /* ★わざと極端に平べったい高さを指定 */
  background-image: url("https://picsum.photos/id/237/400/400"); /* 対象がはっきりしている正方形の犬の画像 */
  background-repeat: no-repeat;
  background-position: center;
  border: 3px solid #333;
  border-radius: 4px;
}

/* ⭕️ 正解のスタイル */
.bg-size2-correct {
  /* 横幅100%, 高さはauto。比率は維持され、上下が切り取られる */
  background-size: 100% auto; 
}

/* ❌ 失敗のスタイル */
.bg-size2-wrong {
  /* 横100%, 縦100%。箱の形に無理やり引き伸ばされて犬が潰れる */
  background-size: 100% 100%; 
}

.bg-size2-code {
  background-color: #282c34;
  color: #abb2bf;
  padding: 15px;
  font-family: monospace;
  font-size: 13px;
  border-radius: 4px;
  line-height: 1.6;
  border-left: 4px solid #198754;
}
.bg-size2-hl-green {
  color: #98c379;
  font-weight: bold;
}
.bg-size2-hl-blue {
  color: #61afef;
  font-weight: bold;
}
.bg-size2-hl-red {
  color: #e06c75;
  font-weight: bold;
}
.bg-size2-hl-comment {
  color: #6c757d;
  font-style: italic;
}

min-widthやmax-widthの使い方を詳しく知りたい人は「【html&css】min-widthとmax-widthの使い方【レスポンシブ対応】」を一読ください。

【html&css】min-widthとmax-widthの使い方【レスポンシブ対応】

背景画像の位置と繰り返しの制御

背景画像のサイズを適切に設定しても、「画像の真ん中ではなく左上が表示されてしまう」「意図せず画像がタイル状に敷き詰められてしまう」といった問題が発生します。

意図した通りにデザインを仕上げるには、配置位置と繰り返しの挙動を制御するプロパティの理解が必須です。

ここでは、背景の配置と位置調整について解説します。

背景画像の位置と繰り返しの制御

画像を中央寄せや右下などに配置する
画像が繰り返されるのを防ぐ

画像を中央寄せや右下などに配置する

背景画像の表示位置をコントロールするには、background-positionプロパティを使用します。

キーワード指定
center、bottom rightなど直感的な指定。
数値・オフセット指定
「右から20px、下から10px」のように特定の端から浮かせたい場合は、モダンな書き方であるbackground-position: right 20px bottom 10px;を使用するのがよいです。

🎯 background-position の調整

/* 💡 1. ど真ん中に配置する（定番） */
.box-center {
  background-position: center;
}

/* 💡 2. 右下に配置する */
.box-bottom-right {
  background-position: bottom right;
}

/* 💡 3. 端から少しズラす（オフセット指定） */
.box-offset {
  /* ❌ paddingやmarginは使わない */
  background-position: right 20px bottom 10px;
}

HTMLコード表示

<div class="bg-pos-wrapper">
  <div class="bg-pos-demo-area">
    <div class="bg-pos-box">
      <div class="bg-pos-label">🎯 background-position の調整</div>
      
      <div class="bg-pos-visual">
        <div style="display:flex; flex-wrap:wrap; gap:10px; margin-bottom:15px; justify-content:center;">
          <button id="bg-pos-btn-center" class="bg-pos-btn bg-pos-btn-active">中央 (center)</button>
          <button id="bg-pos-btn-br" class="bg-pos-btn">右下 (bottom right)</button>
          <button id="bg-pos-btn-offset" class="bg-pos-btn">オフセット (右から20px 下から10px)</button>
        </div>

        <div id="bg-pos-preview" class="bg-pos-preview pos-center">
          </div>
      </div>

      <div class="bg-pos-code">
        /* 💡 1. ど真ん中に配置する（定番） */<br>
        <span class="bg-pos-hl-blue">.box-center</span> {<br>
          <span class="bg-pos-hl-green">background-position: center;</span><br>
        }<br><br>

        /* 💡 2. 右下に配置する */<br>
        <span class="bg-pos-hl-blue">.box-bottom-right</span> {<br>
          <span class="bg-pos-hl-green">background-position: bottom right;</span><br>
        }<br><br>

        /* 💡 3. 端から少しズラす（オフセット指定） */<br>
        <span class="bg-pos-hl-blue">.box-offset</span> {<br>
          <span class="bg-pos-hl-comment">/* ❌ paddingやmarginは使わない */</span><br>
          <span class="bg-pos-hl-green">background-position: right 20px bottom 10px;</span><br>
        }
      </div>
    </div>
  </div>
</div>

CSSコード表示

.bg-pos-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}
.bg-pos-demo-area {
  display: flex;
  justify-content: center;
}
.bg-pos-box {
  background-color: #ffffff;
  border: 2px dashed #adb5bd;
  padding: 25px;
  width: 100%;
  max-width: 600px;
  border-radius: 4px;
}
.bg-pos-label {
  font-size: 15px;
  font-weight: bold;
  margin-bottom: 20px;
  color: #333;
}
.bg-pos-visual {
  background-color: #f1f3f5;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
  border: 1px solid #dee2e6;
  text-align: center;
}
.bg-pos-btn {
  background-color: #e9ecef;
  border: 1px solid #ced4da;
  padding: 8px 15px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
  font-weight: bold;
  color: #495057;
}
.bg-pos-btn-active {
  background-color: #0d6efd;
  color: #fff;
  border-color: #0d6efd;
}
.bg-pos-preview {
  width: 100%;
  height: 250px;
  border: 2px dashed #6c757d;
  border-radius: 4px;
  background-color: #e9ecef;
  
  /* 分かりやすいように小さな星の画像を指定 */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 24 24' fill='%23ffc107'><path d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z'/></svg>");
  background-repeat: no-repeat;
  transition: background-position 0.4s ease;
}

/* クラスによる配置切り替え */
.pos-center {
  background-position: center;
}
.pos-br {
  background-position: bottom right;
}
.pos-offset {
  background-position: right 20px bottom 10px;
}

.bg-pos-code {
  background-color: #282c34;
  color: #abb2bf;
  padding: 15px;
  font-family: monospace;
  font-size: 13px;
  border-radius: 4px;
  line-height: 1.6;
  border-left: 4px solid #0d6efd;
}
.bg-pos-hl-green {
  color: #98c379;
  font-weight: bold;
}
.bg-pos-hl-blue {
  color: #61afef;
  font-weight: bold;
}
.bg-pos-hl-comment {
  color: #6c757d;
  font-style: italic;
}

JavaScriptコード表示

setTimeout(() => {
  const btnCenter = document.getElementById('bg-pos-btn-center');
  const btnBr = document.getElementById('bg-pos-btn-br');
  const btnOffset = document.getElementById('bg-pos-btn-offset');
  const preview = document.getElementById('bg-pos-preview');
  const allBtns = [btnCenter, btnBr, btnOffset];

  function resetBtns() {
    allBtns.forEach(btn => btn.classList.remove('bg-pos-btn-active'));
    preview.className = 'bg-pos-preview'; // クラスリセット
  }

  if(btnCenter && btnBr && btnOffset && preview) {
    btnCenter.addEventListener('click', () => {
      resetBtns();
      btnCenter.classList.add('bg-pos-btn-active');
      preview.classList.add('pos-center');
    });

    btnBr.addEventListener('click', () => {
      resetBtns();
      btnBr.classList.add('bg-pos-btn-active');
      preview.classList.add('pos-br');
    });

    btnOffset.addEventListener('click', () => {
      resetBtns();
      btnOffset.classList.add('bg-pos-btn-active');
      preview.classList.add('pos-offset');
    });
  }
}, 100);

様々な要素に対する中央寄せについて詳しく知りたい人は「【CSS】中央寄せする手法：上下左右・画像・効かない時の解決策」を一読ください。

【CSS】中央寄せする手法：上下左右・画像・効かない時の解決策

画像が繰り返されるのを防ぐ

背景画像を設定した際、初心者をパニックにさせるのが「画像が勝手に増殖してタイル状になってしまう」現象です。

これを防ぐには、background-repeatプロパティの理解が欠かせません。

背景画像としてシームレスなテクスチャ（繰り返すことで機能する画像）を敷き詰める場合を除き、背景画像を設定する際はbackground-repeat: no-repeat;をセットで記述します。

これがバグを防ぐ防御策です。

また、特定の方向（横幅だけなど）に繰り返したい場合はrepeat-xなどを活用します。

🚫 画像の繰り返し（repeat）の制御

⭕️ no-repeat：1つだけ表示されます

/* ❌ 初心者の罠：指定しないと勝手にタイル状に増殖する */
.box-default {
  /* 初期値は repeat です */
  background-repeat: repeat;
}

/* ⭕️ プロの鉄則：基本的に no-repeat をセットで書く */
.box-safe {
  background-image: url(“icon.png”);
  background-repeat: no-repeat;
}

/* 💡 応用：横方向だけに繰り返す（見出しの装飾などで便利） */
.box-line {
  background-repeat: repeat-x;
}

HTMLコード表示

<div class="bg-rep-wrapper">
  <div class="bg-rep-demo-area">
    <div class="bg-rep-box">
      <div class="bg-rep-label">🚫 画像の繰り返し（repeat）の制御</div>
      
      <div class="bg-rep-visual">
        <div style="display:flex; flex-wrap:wrap; gap:10px; margin-bottom:15px; justify-content:center;">
          <button id="bg-rep-btn-repeat" class="bg-rep-btn">デフォルト (repeat)</button>
          <button id="bg-rep-btn-norepeat" class="bg-rep-btn bg-rep-btn-active">繰り返さない (no-repeat)</button>
          <button id="bg-rep-btn-x" class="bg-rep-btn">横のみ (repeat-x)</button>
        </div>

        <div id="bg-rep-preview" class="bg-rep-preview rep-norepeat">
          <p id="bg-rep-text" class="bg-rep-text">⭕️ no-repeat：1つだけ表示されます</p>
        </div>
      </div>

      <div class="bg-rep-code">
        /* ❌ 初心者の罠：指定しないと勝手にタイル状に増殖する */<br>
        <span class="bg-rep-hl-blue">.box-default</span> {<br>
          <span class="bg-rep-hl-comment">/* 初期値は repeat です */</span><br>
          <span class="bg-rep-hl-red">background-repeat: repeat;</span><br>
        }<br><br>

        /* ⭕️ プロの鉄則：基本的に no-repeat をセットで書く */<br>
        <span class="bg-rep-hl-blue">.box-safe</span> {<br>
          <span class="bg-rep-hl-green">background-image: url("icon.png");</span><br>
          <span class="bg-rep-hl-green">background-repeat: no-repeat;</span><br>
        }<br><br>
        
        /* 💡 応用：横方向だけに繰り返す（見出しの装飾などで便利） */<br>
        <span class="bg-rep-hl-blue">.box-line</span> {<br>
          <span class="bg-rep-hl-green">background-repeat: repeat-x;</span><br>
        }
      </div>
    </div>
  </div>
</div>

CSSコード表示

.bg-rep-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}
.bg-rep-demo-area {
  display: flex;
  justify-content: center;
}
.bg-rep-box {
  background-color: #ffffff;
  border: 2px dashed #adb5bd;
  padding: 25px;
  width: 100%;
  max-width: 600px;
  border-radius: 4px;
}
.bg-rep-label {
  font-size: 15px;
  font-weight: bold;
  margin-bottom: 20px;
  color: #333;
}
.bg-rep-visual {
  background-color: #f1f3f5;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
  border: 1px solid #dee2e6;
  text-align: center;
}
.bg-rep-btn {
  background-color: #e9ecef;
  border: 1px solid #ced4da;
  padding: 8px 15px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
  font-weight: bold;
  color: #495057;
}
.bg-rep-btn-active {
  background-color: #dc3545; /* 警告色から安全色に変わるのを強調するため、後でJSで制御 */
  color: #fff;
  border-color: #dc3545;
}
.bg-rep-preview {
  width: 100%;
  height: 200px;
  border: 2px dashed #6c757d;
  border-radius: 4px;
  background-color: #e9ecef;
  
  /* 繰り返しが分かりやすいロゴマークを使用 */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='50' height='50' viewBox='0 0 24 24' fill='%230d6efd'><path d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z'/></svg>");
  background-position: top left;
  
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 10px;
  box-sizing: border-box;
}
.bg-rep-text {
  background-color: rgba(255, 255, 255, 0.9);
  color: #333;
  padding: 5px 15px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: bold;
  margin: 0;
  border: 1px solid #ced4da;
}

/* 繰り返しのクラス設定 */
.rep-default {
  background-repeat: repeat;
}
.rep-norepeat {
  background-repeat: no-repeat;
}
.rep-x {
  background-repeat: repeat-x;
}

.bg-rep-code {
  background-color: #282c34;
  color: #abb2bf;
  padding: 15px;
  font-family: monospace;
  font-size: 13px;
  border-radius: 4px;
  line-height: 1.6;
  border-left: 4px solid #dc3545;
}
.bg-rep-hl-green {
  color: #98c379;
  font-weight: bold;
}
.bg-rep-hl-blue {
  color: #61afef;
  font-weight: bold;
}
.bg-rep-hl-red {
  color: #e06c75;
  font-weight: bold;
}
.bg-rep-hl-comment {
  color: #6c757d;
  font-style: italic;
}

JavaScriptコード表示

setTimeout(() => {
  const btnRepeat = document.getElementById('bg-rep-btn-repeat');
  const btnNoRepeat = document.getElementById('bg-rep-btn-norepeat');
  const btnX = document.getElementById('bg-rep-btn-x');
  const preview = document.getElementById('bg-rep-preview');
  const text = document.getElementById('bg-rep-text');
  const allBtns = [btnRepeat, btnNoRepeat, btnX];

  function resetBtns() {
    allBtns.forEach(btn => {
      btn.classList.remove('bg-rep-btn-active');
      btn.style.backgroundColor = '';
      btn.style.borderColor = '';
    });
    preview.className = 'bg-rep-preview';
  }

  if(btnRepeat && btnNoRepeat && btnX && preview && text) {
    // 初期のno-repeatボタンの色を緑にする
    btnNoRepeat.style.backgroundColor = '#198754';
    btnNoRepeat.style.borderColor = '#198754';

    btnRepeat.addEventListener('click', () => {
      resetBtns();
      btnRepeat.classList.add('bg-rep-btn-active');
      btnRepeat.style.backgroundColor = '#dc3545';
      btnRepeat.style.borderColor = '#dc3545';
      preview.classList.add('rep-default');
      text.textContent = "❌ repeat：余白を埋めるために無限に増殖します";
    });

    btnNoRepeat.addEventListener('click', () => {
      resetBtns();
      btnNoRepeat.classList.add('bg-rep-btn-active');
      btnNoRepeat.style.backgroundColor = '#198754';
      btnNoRepeat.style.borderColor = '#198754';
      preview.classList.add('rep-norepeat');
      text.textContent = "⭕️ no-repeat：1つだけ表示されます";
    });

    btnX.addEventListener('click', () => {
      resetBtns();
      btnX.classList.add('bg-rep-btn-active');
      btnX.style.backgroundColor = '#0d6efd';
      btnX.style.borderColor = '#0d6efd';
      preview.classList.add('rep-x');
      text.textContent = "💡 repeat-x：横方向だけに繰り返されます";
    });
  }
}, 100);

オーバーレイ・透過・複数画像の設定

Webサイトのデザインを高めるには、画像をポンと置くだけでなく、背景画像のエフェクトを駆使することが重要です。

ここでは、文字を読みやすくする暗いフィルター処理、ぼかし（透過）表現、複数画像の重ね合わせを解説します。

オーバーレイ・透過・複数画像の設定

暗いフィルターやグラデーションを重ねる
画像の透過・ぼかし・ブレンドモード
複数の背景画像を一枚の要素に設定する

暗いフィルターやグラデーションを重ねる

ヒーローヘッダー（トップページの一番大きな画像）の上にキャッチコピーを置く際、画像が明るすぎて白い文字が全く読めないという問題が発生します。

画像の上に暗いフィルターやグラデーションを重ねて文字の視認性を上げる「オーバーレイ」があります。

HTMLは触らず、background-imageプロパティの中だけで「グラデーション」と「画像（url）」を同時に指定します。

カンマ区切りで指定するだけで、CSSだけで完結します。

🌗 暗いフィルター（オーバーレイ）の適用

❌ そのままの画像（白い文字が読みづらい）

MESSAGE

⭕️ CSSで暗いフィルターを重ねた画像

MESSAGE

/* 💡 background-imageの中で、グラデーションと画像をカンマで繋ぐ */
.overlay-box {
  background-image:
    linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ),
    url(“photo.jpg”);

  /* 以下は通常の背景設定 */
  background-size: cover;
  background-position: center;
}

HTMLコード表示

<div class="bg-adv1-wrapper">
  <div class="bg-adv1-demo-area">
    <div class="bg-adv1-box">
      <div class="bg-adv1-label">🌗 暗いフィルター（オーバーレイ）の適用</div>
      
      <div class="bg-adv1-visual">
        <div style="margin-bottom: 20px;">
          <p style="font-size:12px; font-weight:bold; color:#dc3545; margin:0 0 5px 0;">❌ そのままの画像（白い文字が読みづらい）</p>
          <div class="bg-adv1-normal">
            <div class="bg-adv1-text">MESSAGE</div>
          </div>
        </div>

        <div>
          <p style="font-size:12px; font-weight:bold; color:#198754; margin:0 0 5px 0;">⭕️ CSSで暗いフィルターを重ねた画像</p>
          <div class="bg-adv1-overlay">
            <div class="bg-adv1-text">MESSAGE</div>
          </div>
        </div>
      </div>

      <div class="bg-adv1-code">
        /* 💡 background-imageの中で、グラデーションと画像をカンマで繋ぐ */<br>
        <span class="bg-adv1-hl-blue">.overlay-box</span> {<br>
          <span class="bg-adv1-hl-green">background-image: </span><br>
            <span class="bg-adv1-hl-red">linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) )</span>,<br>
            <span class="bg-adv1-hl-green">url("photo.jpg");</span><br>
        <br>
          <span class="bg-adv1-hl-comment">/* 以下は通常の背景設定 */</span><br>
          <span class="bg-adv1-hl-green">background-size: cover;</span><br>
          <span class="bg-adv1-hl-green">background-position: center;</span><br>
        }
      </div>
    </div>
  </div>
</div>

CSSコード表示

.bg-adv1-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}
.bg-adv1-demo-area {
  display: flex;
  justify-content: center;
}
.bg-adv1-box {
  background-color: #ffffff;
  border: 2px dashed #adb5bd;
  padding: 25px;
  width: 100%;
  max-width: 500px;
  border-radius: 4px;
}
.bg-adv1-label {
  font-size: 15px;
  font-weight: bold;
  margin-bottom: 20px;
  color: #333;
}
.bg-adv1-visual {
  background-color: #f1f3f5;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
  border: 1px solid #dee2e6;
}

/* 共通設定 */
.bg-adv1-normal, .bg-adv1-overlay {
  width: 100%;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  background-size: cover;
  background-position: center;
}
.bg-adv1-text {
  color: #ffffff;
  font-size: 24px;
  margin: 0;
  letter-spacing: 2px;
}

/* 1. 普通の画像（明るい空の画像などを想定） */
.bg-adv1-normal {
  background-image: url("https://picsum.photos/id/10/500/200");
}

/* 2. 暗いフィルターを重ねた画像 */
.bg-adv1-overlay {
  background-image: 
    linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), /* 黒の60%透過を上に重ねる */
    url("https://picsum.photos/id/10/500/200"); /* 下の画像 */
}

.bg-adv1-code {
  background-color: #282c34;
  color: #abb2bf;
  padding: 15px;
  font-family: monospace;
  font-size: 13px;
  border-radius: 4px;
  line-height: 1.6;
  border-left: 4px solid #198754;
}
.bg-adv1-hl-green {
  color: #98c379;
  font-weight: bold;
}
.bg-adv1-hl-blue {
  color: #61afef;
  font-weight: bold;
}
.bg-adv1-hl-red {
  color: #e06c75;
  font-weight: bold;
}
.bg-adv1-hl-comment {
  color: #6c757d;
  font-style: italic;
}

CSSグラデーションの作り方を詳しく知りたい人は「【CSS】グラデーションの作り方：文字・背景・枠線・アニメーション」を一読ください。

【CSS】グラデーションの作り方：文字・背景・枠線・アニメーション

画像の透過・ぼかし・ブレンドモード

背景の画像を少し薄くしたい、またはすりガラスのようにぼかしたいといった要望も実務では定番です。

背景画像だけを透過させたり、色を混ぜたりする場合は、以下の2つのアプローチを使います。

ブレンドモード（お手軽）
background-colorに半透明色を指定し、background-blend-mode: overlay;を使って画像と色を融合させます。
疑似要素（万能）
::beforeなどの疑似要素を使って背景専用のレイヤーを作り、opacityやfilter: blur();をかけます。

🌫 背景「だけ」を透過・ぼかす

❌ 失敗：opacityを使うと文字まで薄くなる

文字も薄い…

⭕️ 成功：疑似要素（::before）で背景だけを処理

文字はくっきり！

/* 💡 箱そのもの（親要素）の設定 */
.box {
  position: relative; /* 必須：疑似要素の基準にする */
  z-index: 1; /* 必須：スタッキングコンテキストの作成 */
}

/* 💡 疑似要素で「背景専用のレイヤー」を作る */
.box::before {
  content: “”;
  position: absolute;
  inset: 0; /* top, right, bottom, leftを0にする魔法の記述 */
  z-index: -1; /* 背景を一番後ろに持っていく */
  background-image: url(“photo.jpg”);
  opacity: 0.3; /* ここで透過しても文字には影響しない！ */
  filter: blur(3px); /* ぼかし処理も自由自在 */
}

HTMLコード表示

<div class="bg-adv2-wrapper">
  <div class="bg-adv2-demo-area">
    <div class="bg-adv2-box">
      <div class="bg-adv2-label">🌫 背景「だけ」を透過・ぼかす</div>
      
      <div class="bg-adv2-visual">
        <div style="margin-bottom:20px;">
          <p style="font-size:12px; font-weight:bold; color:#dc3545; margin:0 0 5px 0;">❌ 失敗：opacityを使うと文字まで薄くなる</p>
          <div class="bg-adv2-wrong">
            <div class="bg-adv2-text-dark">文字も薄い...</div>
          </div>
        </div>

        <div>
          <p style="font-size:12px; font-weight:bold; color:#198754; margin:0 0 5px 0;">⭕️ 成功：疑似要素（::before）で背景だけを処理</p>
          <div class="bg-adv2-correct">
            <div class="bg-adv2-text-dark">文字はくっきり！</div>
          </div>
        </div>
      </div>

      <div class="bg-adv2-code">
        /* 💡 箱そのもの（親要素）の設定 */<br>
        <span class="bg-adv2-hl-blue">.box</span> {<br>
          <span class="bg-adv2-hl-green">position: relative;</span> /* 必須：疑似要素の基準にする */<br>
          <span class="bg-adv2-hl-green">z-index: 1;</span> /* 必須：スタッキングコンテキストの作成 */<br>
        }<br><br>

        /* 💡 疑似要素で「背景専用のレイヤー」を作る */<br>
        <span class="bg-adv2-hl-blue">.box::before</span> {<br>
          <span class="bg-adv2-hl-green">content: "";</span><br>
          <span class="bg-adv2-hl-green">position: absolute;</span><br>
          <span class="bg-adv2-hl-green">inset: 0;</span> /* top, right, bottom, leftを0にする魔法の記述 */<br>
          <span class="bg-adv2-hl-green">z-index: -1;</span> /* 背景を一番後ろに持っていく */<br>
          <span class="bg-adv2-hl-green">background-image: url("photo.jpg");</span><br>
          <span class="bg-adv2-hl-red">opacity: 0.3;</span> /* ここで透過しても文字には影響しない！ */<br>
          <span class="bg-adv2-hl-red">filter: blur(3px);</span> /* ぼかし処理も自由自在 */<br>
        }
      </div>
    </div>
  </div>
</div>

CSSコード表示

.bg-adv2-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}
.bg-adv2-demo-area {
  display: flex;
  justify-content: center;
}
.bg-adv2-box {
  background-color: #ffffff;
  border: 2px dashed #adb5bd;
  padding: 25px;
  width: 100%;
  max-width: 500px;
  border-radius: 4px;
}
.bg-adv2-label {
  font-size: 15px;
  font-weight: bold;
  margin-bottom: 20px;
  color: #333;
}
.bg-adv2-visual {
  background-color: #f1f3f5;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
  border: 1px solid #dee2e6;
}

/* 共通設定 */
.bg-adv2-text-dark {
  color: #111;
  font-size: 20px;
  margin: 0;
  font-weight: 900;
}
.bg-adv2-wrong {
  width: 100%;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  background-image: url("https://picsum.photos/id/20/500/200");
  background-size: cover;
  background-position: center;
  /* ❌ 初心者のミス：直にopacityをかける */
  opacity: 0.4;
}

/* ⭕️ プロのテクニック：疑似要素 */
.bg-adv2-correct {
  width: 100%;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  
  /* 疑似要素の基準 */
  position: relative;
  z-index: 1;
  /* 画像がぼやけてはみ出すのを防ぐ */
  overflow: hidden; 
}
.bg-adv2-correct::before {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0; /* inset: 0; と同義 */
  z-index: -1;
  
  background-image: url("https://picsum.photos/id/20/500/200");
  background-size: cover;
  background-position: center;
  
  /* 背景だけを透過＆ぼかし */
  opacity: 0.4;
  filter: blur(2px);
}

.bg-adv2-code {
  background-color: #282c34;
  color: #abb2bf;
  padding: 15px;
  font-family: monospace;
  font-size: 13px;
  border-radius: 4px;
  line-height: 1.6;
  border-left: 4px solid #0d6efd;
}
.bg-adv2-hl-green {
  color: #98c379;
  font-weight: bold;
}
.bg-adv2-hl-blue {
  color: #61afef;
  font-weight: bold;
}
.bg-adv2-hl-red {
  color: #e06c75;
  font-weight: bold;
}

疑似要素である::beforeや::afterの使い方を詳しく知りたい人は「【CSS】::before・::after擬似要素の使い方：画像・アイコン・ホバーエフェクト」を一読ください。

【CSS】::before・::after擬似要素の使い方：画像・アイコン・ホバーエフェクト

複数の背景画像を一枚の要素に設定する

1つの箱に対して2枚以上の画像を設定する方法です。

例えば、「全体には写真を敷き、右下にロゴマークの透かしを入れる」といったデザインなどは、HTMLを増やさずにCSSだけで実現できます。

複数画像を設定する際は、「手前に出したい小さな画像やグラデーション」を一番左（先頭）に記述し、「一番後ろに敷く巨大な写真やパターン」を最後に記述します。

また、サイズ（background-size）や位置（background-position）も、カンマ区切りでそれぞれの画像に対応するように記述します。

🥞 複数画像（カンマ区切り）の重ね合わせ

⭕️ 写真（奥）の上に、アイコン（手前・右下）を重ねる

.multiple-box {
  /* 💡 1. 順番の鉄則：手前に出したいものを先に書く！ */
  background-image:
    url(“icon.png”), /* 手前（上レイヤー） */
    url(“photo.jpg”); /* 奥（下レイヤー） */

  /* 💡 2. 位置の指定（カンマ区切りで連動する） */
  background-position:
    bottom 10px right 10px, /* アイコンは右下に */
    center; /* 写真は中央に */

  /* 💡 3. サイズと繰り返しの指定 */
  background-size:
    50px auto, /* アイコンは小さく */
    cover; /* 写真は画面いっぱいに */

  background-repeat:
    no-repeat,
    no-repeat;
}

HTMLコード表示

<div class="bg-adv3-wrapper">
  <div class="bg-adv3-demo-area">
    <div class="bg-adv3-box">
      <div class="bg-adv3-label">🥞 複数画像（カンマ区切り）の重ね合わせ</div>
      
      <div class="bg-adv3-visual">
        <p style="font-size:12px; font-weight:bold; color:#198754; margin:0 0 10px 0;">⭕️ 写真（奥）の上に、アイコン（手前・右下）を重ねる</p>
        <div class="bg-adv3-multiple">
          </div>
      </div>

      <div class="bg-adv3-code">
        <span class="bg-adv3-hl-blue">.multiple-box</span> {<br>
          <span class="bg-adv3-hl-comment">/* 💡 1. 順番の鉄則：手前に出したいものを先に書く！ */</span><br>
          <span class="bg-adv3-hl-green">background-image: </span><br>
            <span class="bg-adv3-hl-red">url("icon.png")</span>, /* 手前（上レイヤー） */<br>
            <span class="bg-adv3-hl-blue">url("photo.jpg")</span>; /* 奥（下レイヤー） */<br>
        <br>
          <span class="bg-adv3-hl-comment">/* 💡 2. 位置の指定（カンマ区切りで連動する） */</span><br>
          <span class="bg-adv3-hl-green">background-position: </span><br>
            <span class="bg-adv3-hl-red">bottom 10px right 10px</span>, /* アイコンは右下に */<br>
            <span class="bg-adv3-hl-blue">center</span>; /* 写真は中央に */<br>
        <br>
          <span class="bg-adv3-hl-comment">/* 💡 3. サイズと繰り返しの指定 */</span><br>
          <span class="bg-adv3-hl-green">background-size: </span><br>
            <span class="bg-adv3-hl-red">50px auto</span>, /* アイコンは小さく */<br>
            <span class="bg-adv3-hl-blue">cover</span>; /* 写真は画面いっぱいに */<br>
        <br>
          <span class="bg-adv3-hl-green">background-repeat: </span><br>
            <span class="bg-adv3-hl-red">no-repeat</span>,<br>
            <span class="bg-adv3-hl-blue">no-repeat</span>;<br>
        }
      </div>
    </div>
  </div>
</div>

CSSコード表示

.bg-adv3-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}
.bg-adv3-demo-area {
  display: flex;
  justify-content: center;
}
.bg-adv3-box {
  background-color: #ffffff;
  border: 2px dashed #adb5bd;
  padding: 25px;
  width: 100%;
  max-width: 550px;
  border-radius: 4px;
}
.bg-adv3-label {
  font-size: 15px;
  font-weight: bold;
  margin-bottom: 20px;
  color: #333;
}
.bg-adv3-visual {
  background-color: #f1f3f5;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
  border: 1px solid #dee2e6;
}

/* 複数画像のテクニック */
.bg-adv3-multiple {
  width: 100%;
  height: 200px;
  border-radius: 4px;
  border: 1px solid #ced4da;
  
  /* 1. 画像の指定（左が手前、右が奥） */
  background-image: 
    /* 手前のスタンプ画像（SVGデータ） */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><circle cx='50' cy='50' r='45' fill='none' stroke='%23ffffff' stroke-width='4'/><text x='50' y='55' font-family='sans-serif' font-size='20' font-weight='bold' fill='%23ffffff' text-anchor='middle'>NEW</text></svg>"),
    /* 奥の風景画像 */
    url("https://picsum.photos/id/29/600/300");
    
  /* 2. 位置の指定 */
  background-position: 
    right 15px bottom 15px, /* スタンプは右下 */
    center;                 /* 風景は中央 */
    
  /* 3. サイズの指定 */
  background-size: 
    60px 60px, /* スタンプの大きさ */
    cover;     /* 風景の大きさ */
    
  /* 4. 繰り返しの指定 */
  background-repeat: 
    no-repeat,
    no-repeat;
}

.bg-adv3-code {
  background-color: #282c34;
  color: #abb2bf;
  padding: 15px;
  font-family: monospace;
  font-size: 13px;
  border-radius: 4px;
  line-height: 1.6;
  border-left: 4px solid #198754;
}
.bg-adv3-hl-green {
  color: #98c379;
  font-weight: bold;
}
.bg-adv3-hl-blue {
  color: #61afef;
  font-weight: bold;
}
.bg-adv3-hl-red {
  color: #e06c75;
  font-weight: bold;
}
.bg-adv3-hl-comment {
  color: #6c757d;
  font-style: italic;
}

アニメーションとパララックス（視差効果）の実装

Webデザインにおいて、静止した画像を表示するだけでなく、ユーザーの操作に合わせて動く背景画像のアニメーションを取り入れることで、サイトの印象は格段にリッチになります。

ここでは、マウスを乗せた時のズーム効果、スクロールに連動するパララックス（視差効果）を解説します。

アニメーションとパララックス（視差効果）の実装

ホバー時のズームやフェードイン効果
背景画像を固定するパララックス効果

ホバー時のズームやフェードイン効果

カード型のリンクやバナー画像にマウスを乗せた際、背景画像が拡大したり、縮小したりする表現はクリックを促す定番のUIデザインです。

背景画像を滑らかに拡大縮小させるには、背景専用の疑似要素（::before）を作り、transform: scale()をかけてアニメーションさせるのがよいです。

transformプロパティはPCのグラフィックボード（GPU）を使って処理されるため、スマホでも滑らかに動きます。

🔍 ホバー時の滑らかなズーム（拡大）

下のカードにマウスを乗せて（スマホの場合はタップして）ください。

SPECIAL TOUR

詳細を見る ➔

/* 💡 1. 親要素には overflow: hidden をかける */
.card {
  position: relative;
  overflow: hidden; /* 拡大した背景がはみ出ないように切る */
}

/* 💡 2. 背景は疑似要素（::before）に設定する */
.card::before {
  content: “”;
  position: absolute;
  inset: 0; /* 親要素にピッタリ重ねる */
  background-image: url(“photo.jpg”);
  transition: transform 0.4s ease; /* 変化を滑らかにする */
}

/* 💡 3. ホバー時に背景レイヤーだけを scale で拡大する */
.card:hover::before {
  transform: scale(1.1); /* 1.1倍に拡大（GPUで処理されるので超滑らか！） */
}

HTMLコード表示

<div class="bg-anim1-wrapper">
  <div class="bg-anim1-demo-area">
    <div class="bg-anim1-box">
      <div class="bg-anim1-label">🔍 ホバー時の滑らかなズーム（拡大）</div>
      
      <div class="bg-anim1-visual">
        <p style="font-size:12px; color:#555; margin-bottom:15px; text-align:center;">
          下のカードにマウスを乗せて（スマホの場合はタップして）ください。
        </p>

        <div class="bg-anim1-card">
          <div class="bg-anim1-content">
            <div class="bg-anim1-title">SPECIAL TOUR</div>
            <p class="bg-anim1-desc">詳細を見る ➔</p>
          </div>
        </div>
      </div>

      <div class="bg-anim1-code">
        /* 💡 1. 親要素には overflow: hidden をかける */<br>
        <span class="bg-anim1-hl-blue">.card</span> {<br>
          <span class="bg-anim1-hl-green">position: relative;</span><br>
          <span class="bg-anim1-hl-green">overflow: hidden;</span> /* 拡大した背景がはみ出ないように切る */<br>
        }<br><br>

        /* 💡 2. 背景は疑似要素（::before）に設定する */<br>
        <span class="bg-anim1-hl-blue">.card::before</span> {<br>
          <span class="bg-anim1-hl-green">content: "";</span><br>
          <span class="bg-anim1-hl-green">position: absolute;</span><br>
          <span class="bg-anim1-hl-green">inset: 0;</span> /* 親要素にピッタリ重ねる */<br>
          <span class="bg-anim1-hl-green">background-image: url("photo.jpg");</span><br>
          <span class="bg-anim1-hl-red">transition: transform 0.4s ease;</span> /* 変化を滑らかにする */<br>
        }<br><br>

        /* 💡 3. ホバー時に背景レイヤーだけを scale で拡大する */<br>
        <span class="bg-anim1-hl-blue">.card:hover::before</span> {<br>
          <span class="bg-anim1-hl-red">transform: scale(1.1);</span> /* 1.1倍に拡大（GPUで処理されるので超滑らか！） */<br>
        }
      </div>
    </div>
  </div>
</div>

CSSコード表示

.bg-anim1-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}
.bg-anim1-demo-area {
  display: flex;
  justify-content: center;
}
.bg-anim1-box {
  background-color: #ffffff;
  border: 2px dashed #adb5bd;
  padding: 25px;
  width: 100%;
  max-width: 500px;
  border-radius: 4px;
}
.bg-anim1-label {
  font-size: 15px;
  font-weight: bold;
  margin-bottom: 20px;
  color: #333;
}
.bg-anim1-visual {
  background-color: #f1f3f5;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
  border: 1px solid #dee2e6;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ホバーカードの実装 */
.bg-anim1-card {
  width: 100%;
  max-width: 300px;
  height: 200px;
  border-radius: 8px;
  cursor: pointer;
  
  /* 必須設定 */
  position: relative;
  overflow: hidden; /* 背景のはみ出しをカット */
  
  /* コンテンツを中央に */
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

/* 背景用のレイヤー（疑似要素） */
.bg-anim1-card::before {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 1; /* 下に敷く */
  
  /* 背景画像の設定 */
  background-image: url("https://picsum.photos/id/1015/600/400");
  background-size: cover;
  background-position: center;
  
  /* 画像を少し暗くしておく（文字を読ませるため） */
  filter: brightness(0.7);
  
  /* トランジション（滑らかな変化）の設定 */
  transition: transform 0.5s ease;
}

/* ホバー時のアクション（疑似要素を拡大） */
.bg-anim1-card:hover::before {
  transform: scale(1.15); /* 1.15倍に拡大 */
}

/* 中身のテキスト（背景より前に出す） */
.bg-anim1-content {
  position: relative;
  z-index: 2; /* 疑似要素(1)より上に設定 */
  text-align: center;
  color: #fff;
  transition: transform 0.3s ease;
}
.bg-anim1-card:hover .bg-anim1-content {
  transform: translateY(-5px); /* 文字も少し上にフワッと浮かせる */
}
.bg-anim1-title {
  margin: 0 0 10px 0;
  font-size: 22px;
  letter-spacing: 2px;
  font-weight: bold;
}
.bg-anim1-desc {
  margin: 0;
  font-size: 13px;
  opacity: 0.9;
}

.bg-anim1-code {
  background-color: #282c34;
  color: #abb2bf;
  padding: 15px;
  font-family: monospace;
  font-size: 13px;
  border-radius: 4px;
  line-height: 1.6;
  border-left: 4px solid #0d6efd;
}
.bg-anim1-hl-green {
  color: #98c379;
  font-weight: bold;
}
.bg-anim1-hl-blue {
  color: #61afef;
  font-weight: bold;
}
.bg-anim1-hl-red {
  color: #e06c75;
  font-weight: bold;
}

アニメーション要素であるtransformの使い方を詳しく知りたい人は「【CSS】transformの使い方：移動・回転・拡大と効かない時の対策」を一読ください。

【CSS】transformの使い方：移動・回転・拡大と効かない時の対策

背景画像を固定するパララックス効果

ページをスクロールしても、背景画像だけがその場に留まり、手前のコンテンツだけが通り過ぎていく「パララックス（視差）効果」は、奥行きを演出するテクニックです。

これはbackground-image: fixed;を使うことで実装できます。

実務では以下のどちらかで対応します。

スマホではパララックスを諦め、CSSのメディアクエリ（@media (min-width: 768px)）を使ってPC表示の時だけfixedを効かせる。
背景画像専用のdivタグを作り、position: fixed;（スクロールしても画面に張り付く設定）とz-index: -1;を組み合わせて「疑似パララックス」を作る。

🏔 背景の固定（パララックス効果）

↓↓ この枠の中を上下にスクロールしてみてください ↓↓

スクロール
↓

背景が固定されています

↑
スクロール

/* 💡 背景を画面（ビューポート）に対して固定する */
.parallax-box {
  background-image: url(“mountain.jpg”);
  background-size: cover;
  background-position: center;

  background-attachment: fixed; /* これだけでパララックス完成 */
}

/* ⚠️ 注意喚起（iOSバグ対策） */
@media (max-width: 767px) {
  .parallax-box {
    /* スマホではバグるため、固定を解除（スクロールさせる） */
    background-attachment: scroll;
  }
}

HTMLコード表示

<div class="bg-anim2-wrapper">
  <div class="bg-anim2-demo-area">
    <div class="bg-anim2-box">
      <div class="bg-anim2-label">🏔 背景の固定（パララックス効果）</div>
      
      <div class="bg-anim2-visual">
        <p style="font-size:12px; color:#dc3545; font-weight:bold; margin-bottom:10px; text-align:center;">
          ↓↓ この枠の中を上下にスクロールしてみてください ↓↓
        </p>
        
        <div class="bg-anim2-scroll-container">
          <div class="bg-anim2-dummy-text">
            スクロール<br>↓
          </div>

          <div class="bg-anim2-parallax-area">
            <h3 class="bg-anim2-parallax-text">背景が固定されています</h3>
          </div>

          <div class="bg-anim2-dummy-text">
            ↑<br>スクロール
          </div>
        </div>
      </div>

      <div class="bg-anim2-code">
        /* 💡 背景を画面（ビューポート）に対して固定する */<br>
        <span class="bg-anim2-hl-blue">.parallax-box</span> {<br>
          <span class="bg-anim2-hl-green">background-image: url("mountain.jpg");</span><br>
          <span class="bg-anim2-hl-green">background-size: cover;</span><br>
          <span class="bg-anim2-hl-green">background-position: center;</span><br>
        <br>
          <span class="bg-anim2-hl-red">background-attachment: fixed;</span> /* これだけでパララックス完成 */<br>
        }<br><br>
        
        /* ⚠️ 注意喚起（iOSバグ対策） */<br>
        <span class="bg-anim2-hl-blue">@media (max-width: 767px)</span> {<br>
          <span class="bg-anim2-hl-blue">.parallax-box</span> {<br>
            <span class="bg-anim2-hl-comment">/* スマホではバグるため、固定を解除（スクロールさせる） */</span><br>
            <span class="bg-anim2-hl-green">background-attachment: scroll;</span><br>
          }<br>
        }
      </div>
    </div>
  </div>
</div>

CSSコード表示

.bg-anim2-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}
.bg-anim2-demo-area {
  display: flex;
  justify-content: center;
}
.bg-anim2-box {
  background-color: #ffffff;
  border: 2px dashed #adb5bd;
  padding: 25px;
  width: 100%;
  max-width: 500px;
  border-radius: 4px;
}
.bg-anim2-label {
  font-size: 15px;
  font-weight: bold;
  margin-bottom: 20px;
  color: #333;
}
.bg-anim2-visual {
  background-color: #f1f3f5;
  padding: 10px;
  border-radius: 8px;
  margin-bottom: 20px;
  border: 1px solid #dee2e6;
}

/* スクロールを発生させるためのコンテナ */
.bg-anim2-scroll-container {
  height: 300px; /* デモ枠の高さを固定 */
  overflow-y: auto; /* 中身がはみ出たらスクロールバーを出す */
  border: 1px solid #ced4da;
  border-radius: 4px;
  background-color: #fff;
}

/* 上下のダミー余白 */
.bg-anim2-dummy-text {
  height: 250px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #adb5bd;
  font-weight: bold;
  font-size: 18px;
  text-align: center;
  line-height: 1.5;
}

/* パララックス効果のあるエリア */
.bg-anim2-parallax-area {
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  
  /* 背景画像の設定 */
  background-image: url("https://picsum.photos/id/11/800/600");
  background-size: cover;
  background-position: center;
  
  /* ★ ここがパララックスの正体 ★ */
  background-attachment: fixed;
}

.bg-anim2-parallax-text {
  background-color: rgba(0,0,0,0.7);
  color: #fff;
  padding: 10px 20px;
  margin: 0;
  font-size: 16px;
  border-radius: 4px;
  letter-spacing: 1px;
}

.bg-anim2-code {
  background-color: #282c34;
  color: #abb2bf;
  padding: 15px;
  font-family: monospace;
  font-size: 13px;
  border-radius: 4px;
  line-height: 1.6;
  border-left: 4px solid #dc3545;
}
.bg-anim2-hl-green {
  color: #98c379;
  font-weight: bold;
}
.bg-anim2-hl-blue {
  color: #61afef;
  font-weight: bold;
}
.bg-anim2-hl-red {
  color: #e06c75;
  font-weight: bold;
}
.bg-anim2-hl-comment {
  color: #6c757d;
  font-style: italic;
}

疑似パララックスで利用するpositionプロパティの使い方を詳しく知りたい人は「【html&css】positionの使い方とabsolute・fixed・relativeの使い分け」を一読ください。

また、奥行きに関するz-indexプロパティの使い方も詳しく知りたい人は「【html&css】z-indexとは？使い方と効かない時の対処」を一読ください。

【html&css】positionの使い方とabsolute・fixed・relativeの使い分け

【html&css】z-indexとは？使い方と効かない時の対処

SVGやBase64データの活用

これまでは主にJPGやPNGといった形式の画像を扱ってきましたが、Web制作では軽くて高画質な次世代フォーマットの採用が当たり前になっています。

特に、拡大しても画質が劣化しないベクター画像（svg）、画像を文字列に変換してCSSファイルの中に直接埋め込んでしまう技術（base64）は実務で登場します。

ここでは、モダンな背景画像の実装手法と注意点を解説します。

SVGやBase64データの活用

SVG画像を背景にして色を変更する
Base64で画像を直接CSSに埋め込む

SVG画像を背景にして色を変更する

アイコンやロゴなど、くっきりと表示させたい図形にはSVG画像を背景に指定するのがよいです。

例えば、CSSだけで背景のSVGアイコンの色を変えたい場合、ベストプラクティスはbackground-imageを使うのをやめることです。

代わりに、mask-image（マスク機能）を使ってSVGの形に要素を切り抜き、要素自身のbackground-colorを変更することで、「SVGの色が変わっているように見せる」というテクニックを使用します。

🖌 SVGアイコンの色をCSSで変更する

❌ background-image（色変更不可）

青色に指定しても、元の黒色のまま変わらない…

⭕️ mask-image（自由に変更可能）

背景色（background-color）で自由自在に色を変えられます！

/* ❌ 失敗：背景画像として読み込むと色は変えられない */
.icon-wrong {
  background-image: url(“icon.svg”);
  fill: blue; /* ← 効かない！ */
  color: blue; /* ← 効かない！ */
}

/* ⭕️ 正解：マスクを使って要素を切り抜き、背景色を塗る */
.icon-correct {
  background-color: #0d6efd; /* 💡 ここで好きな色を指定！ */

  /* ベンダープレフィックス（-webkit-）も忘れずに */
  -webkit-mask-image: url(“icon.svg”);
  mask-image: url(“icon.svg”);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

HTMLコード表示

<div class="bg-mod1-wrapper">
  <div class="bg-mod1-demo-area">
    <div class="bg-mod1-box">
      <div class="bg-mod1-label">🖌 SVGアイコンの色をCSSで変更する</div>
      
      <div class="bg-mod1-visual">
        <div class="bg-mod1-item">
          <p style="font-size:12px; font-weight:bold; color:#dc3545; margin:0 0 10px 0;">❌ background-image（色変更不可）</p>
          <div class="bg-mod1-icon-wrong"></div>
          <p style="font-size:11px; color:#666; margin-top:5px;">青色に指定しても、元の黒色のまま変わらない...</p>
        </div>

        <div class="bg-mod1-item" style="margin-top:20px;">
          <p style="font-size:12px; font-weight:bold; color:#198754; margin:0 0 10px 0;">⭕️ mask-image（自由に変更可能）</p>
          <div class="bg-mod1-icon-correct"></div>
          <p style="font-size:11px; color:#666; margin-top:5px;">背景色（background-color）で自由自在に色を変えられます！</p>
        </div>
      </div>

      <div class="bg-mod1-code">
        /* ❌ 失敗：背景画像として読み込むと色は変えられない */<br>
        <span class="bg-mod1-hl-blue">.icon-wrong</span> {<br>
          <span class="bg-mod1-hl-green">background-image: url("icon.svg");</span><br>
          <span class="bg-mod1-hl-red">fill: blue;</span> /* ← 効かない！ */<br>
          <span class="bg-mod1-hl-red">color: blue;</span> /* ← 効かない！ */<br>
        }<br><br>

        /* ⭕️ 正解：マスクを使って要素を切り抜き、背景色を塗る */<br>
        <span class="bg-mod1-hl-blue">.icon-correct</span> {<br>
          <span class="bg-mod1-hl-green">background-color: #0d6efd;</span> /* 💡 ここで好きな色を指定！ */<br>
        <br>
          <span class="bg-mod1-hl-comment">/* ベンダープレフィックス（-webkit-）も忘れずに */</span><br>
          <span class="bg-mod1-hl-green">-webkit-mask-image: url("icon.svg");</span><br>
          <span class="bg-mod1-hl-green">mask-image: url("icon.svg");</span><br>
          <span class="bg-mod1-hl-green">-webkit-mask-size: contain;</span><br>
          <span class="bg-mod1-hl-green">mask-size: contain;</span><br>
          <span class="bg-mod1-hl-green">-webkit-mask-repeat: no-repeat;</span><br>
          <span class="bg-mod1-hl-green">mask-repeat: no-repeat;</span><br>
        }
      </div>
    </div>
  </div>
</div>

CSSコード表示

.bg-mod1-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}
.bg-mod1-demo-area {
  display: flex;
  justify-content: center;
}
.bg-mod1-box {
  background-color: #ffffff;
  border: 2px dashed #adb5bd;
  padding: 25px;
  width: 100%;
  max-width: 500px;
  border-radius: 4px;
}
.bg-mod1-label {
  font-size: 15px;
  font-weight: bold;
  margin-bottom: 20px;
  color: #333;
}
.bg-mod1-visual {
  background-color: #f1f3f5;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
  border: 1px solid #dee2e6;
}

/* 共通のアイコンサイズ */
.bg-mod1-icon-wrong, .bg-mod1-icon-correct {
  width: 50px;
  height: 50px;
  margin: 0 auto;
}

/* ❌ 失敗例：普通のbackground-image */
.bg-mod1-icon-wrong {
  /* 黒い星のSVG */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z'/></svg>");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  
  /* 色を変えようとしても無駄 */
  fill: #0d6efd !important;
  color: #0d6efd !important;
}

/* ⭕️ 成功例：mask-image */
.bg-mod1-icon-correct {
  /* 背景色として青を指定（グラデーションも可能！） */
  background-color: #0d6efd;
  
  /* SVGの形でマスキング（切り抜き）する */
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z'/></svg>");
  
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

.bg-mod1-code {
  background-color: #282c34;
  color: #abb2bf;
  padding: 15px;
  font-family: monospace;
  font-size: 13px;
  border-radius: 4px;
  line-height: 1.6;
  border-left: 4px solid #198754;
}
.bg-mod1-hl-green {
  color: #98c379;
  font-weight: bold;
}
.bg-mod1-hl-blue {
  color: #61afef;
  font-weight: bold;
}
.bg-mod1-hl-red {
  color: #e06c75;
  font-weight: bold;
}
.bg-mod1-hl-comment {
  color: #6c757d;
  font-style: italic;
}

Base64で画像を直接CSSに埋め込む

画像を文字列（Base64形式など）に変換し、外部ファイルを読み込まずに直接CSSの中に画像データを記述するBase64形式があります。

これにより、ブラウザが画像を読み込むための通信（HTTPリクエスト）が減り、サイトの表示速度が向上する場合があります。

「読み込みが速くなるらしい」と聞きつけ、数メガバイトもある巨大なヒーロー画像をBase64に変換してCSSに貼り付けてしまうという大惨事がたまに起きます。

Base64に変換すると、元の画像サイズよりもデータ量が約1.3倍に膨れ上がります。

それをCSSファイルに埋め込むと、CSSファイル自体が数メガバイトの重さになり、結果として「画面のレイアウトが読み込まれずサイトが真っ白になる」というパフォーマンス低下を引き起こします。

Base64埋め込みは、「通信するのももったいないくらい小さな画像（数キロバイトのアイコンやローディングアニメーション、小さなリピートパターン）」にのみ使用してください。

🧬 Base64（データURI）による画像の埋め込み

下の背景パターンは画像ファイルを読み込んでいません。CSSに書かれた「暗号のような文字列」だけで表示されています。

NO HTTP REQUESTS

.pattern-box {
  /* 💡 data:image/png;base64, に続けて変換した文字列を記述 */
  background-image: url(“data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAIklEQVQIW2NkQAKrVq36zwjjgzhhYWGMYAEYB8RmROaABADeOQ8CXl/xfgAAAABJRU5ErkJggg==”);

  background-repeat: repeat;
}

HTMLコード表示

<div class="bg-mod2-wrapper">
  <div class="bg-mod2-demo-area">
    <div class="bg-mod2-box">
      <div class="bg-mod2-label">🧬 Base64（データURI）による画像の埋め込み</div>
      
      <div class="bg-mod2-visual">
        <p style="font-size:12px; color:#555; margin-bottom:10px;">
          下の背景パターンは画像ファイルを読み込んでいません。CSSに書かれた「暗号のような文字列」だけで表示されています。
        </p>
        <div class="bg-mod2-pattern">
          <p class="bg-mod2-text">NO HTTP REQUESTS</p>
        </div>
      </div>

      <div class="bg-mod2-code">
        <span class="bg-mod2-hl-blue">.pattern-box</span> {<br>
          <span class="bg-mod2-hl-comment">/* 💡 data:image/png;base64, に続けて変換した文字列を記述 */</span><br>
          <span class="bg-mod2-hl-green">background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAIklEQVQIW2NkQAKrVq36zwjjgzhhYWGMYAEYB8RmROaABADeOQ8CXl/xfgAAAABJRU5ErkJggg==");</span><br>
        <br>
          <span class="bg-mod2-hl-green">background-repeat: repeat;</span><br>
        }
      </div>
    </div>
  </div>
</div>

CSSコード表示

.bg-mod2-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}
.bg-mod2-demo-area {
  display: flex;
  justify-content: center;
}
.bg-mod2-box {
  background-color: #ffffff;
  border: 2px dashed #adb5bd;
  padding: 25px;
  width: 100%;
  max-width: 550px;
  border-radius: 4px;
}
.bg-mod2-label {
  font-size: 15px;
  font-weight: bold;
  margin-bottom: 20px;
  color: #333;
}
.bg-mod2-visual {
  background-color: #f1f3f5;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
  border: 1px solid #dee2e6;
}

/* Base64で埋め込まれた小さなパターン画像（4x4ピクセルの市松模様） */
.bg-mod2-pattern {
  width: 100%;
  height: 120px;
  border-radius: 4px;
  border: 1px solid #adb5bd;
  display: flex;
  align-items: center;
  justify-content: center;
  
  /* Base64 */
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAIklEQVQIW2NkQAKrVq36zwjjgzhhYWGMYAEYB8RmROaABADeOQ8CXl/xfgAAAABJRU5ErkJggg==");
  background-repeat: repeat;
  background-size: 16px 16px; /* 模様を見やすく拡大 */
}

.bg-mod2-text {
  background-color: #fff;
  padding: 10px 20px;
  border-radius: 50px;
  font-size: 14px;
  font-weight: bold;
  color: #333;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  margin: 0;
}

.bg-mod2-code {
  background-color: #282c34;
  color: #abb2bf;
  padding: 15px;
  font-family: monospace;
  font-size: 13px;
  border-radius: 4px;
  line-height: 1.6;
  border-left: 4px solid #0d6efd;
  /* 長いURLを折り返す */
  word-break: break-all; 
}
.bg-mod2-hl-green {
  color: #98c379;
  font-weight: bold;
}
.bg-mod2-hl-blue {
  color: #61afef;
  font-weight: bold;
}
.bg-mod2-hl-comment {
  color: #6c757d;
  font-style: italic;
}

JS・WordPress等での動的な背景画像の設定

これまではCSSファイルに直接画像のパスを書き込む静的な手法を解説しましたが、実務では「ユーザーの操作に合わせて背景を変えたい」「WordPressの管理画面から登録した画像を背景にしたい」といったプログラムによる動的な制御が求められます。

ここでは、JavaScriptを用いた切り替え、実務案件で直面するWordPress環境特有のパス指定のルールを解説します。

JS・WordPress等での動的な背景画像の設定

JavaScriptで背景画像を動的に変更する
WordPressのテーマ開発における背景画像パスの指定

JavaScriptで背景画像を動的に変更する

「ボタンをクリックしたら背景が切り替わる」といったインタラクティブな表現は、JavaScriptによる背景画像の変更の代表的な用途です。

パスの基準が変わる
CSSファイルに書く時は「CSSファイルから見た画像の位置（例：../images/bg.jpg）」ですが、JSで要素に直接スタイルを当てる場合、基準は「HTMLファイルから見た位置」に変わります。
これを忘れてCSSと同じパスを書き、画像がリンク切れ（404）になるミスが多発します。
クォーテーションの構文エラー
url('画像パス') という文字列をJSで作る際、シングルクォートとダブルクォートの使い分けに失敗し、プログラム自体がエラーで動かなくなるミスです。

☀️🌙 JSによる背景画像の動的切り替え

MORNING

/* 💡 Vanilla JS（素のJavaScript）の場合 */
element.style.backgroundImage = `url(‘${imgUrl}’)`;

/* 💡 jQueryの場合 */
$(element).css(‘background-image’, `url(‘${imgUrl}’)`);

/* ❌ 初心者がよくやる構文エラー（クォートの迷子） */
element.style.backgroundImage = “url(” + imgUrl + “)”;
/* ↑ URLの中にクォートがないため、ブラウザによっては無効になります */

HTMLコード表示

<div class="bg-dyn1-wrapper">
  <div class="bg-dyn1-demo-area">
    <div class="bg-dyn1-box">
      <div class="bg-dyn1-label">☀️🌙 JSによる背景画像の動的切り替え</div>
      
      <div class="bg-dyn1-visual">
        <div style="display:flex; gap:10px; margin-bottom:15px; justify-content:center;">
          <button id="bg-dyn1-btn-day" class="bg-dyn1-btn bg-dyn1-btn-day">朝にする</button>
          <button id="bg-dyn1-btn-night" class="bg-dyn1-btn bg-dyn1-btn-night">夜にする</button>
        </div>

        <div id="bg-dyn1-target" class="bg-dyn1-target">
          <div id="bg-dyn1-text" class="bg-dyn1-text">MORNING</div>
        </div>
      </div>

      <div class="bg-dyn1-code">
        /* 💡 Vanilla JS（素のJavaScript）の場合 */<br>
        <span class="bg-dyn1-hl-blue">element.style.backgroundImage</span> = <span class="bg-dyn1-hl-green">`url('${imgUrl}')`</span>;<br><br>

        /* 💡 jQueryの場合 */<br>
        <span class="bg-dyn1-hl-blue">$(element).css</span>(<span class="bg-dyn1-hl-green">'background-image'</span>, <span class="bg-dyn1-hl-green">`url('${imgUrl}')`</span>);<br><br>

        /* ❌ 初心者がよくやる構文エラー（クォートの迷子） */<br>
        <span class="bg-dyn1-hl-red">element.style.backgroundImage = "url(" + imgUrl + ")";</span><br>
        <span class="bg-dyn1-hl-comment">/* ↑ URLの中にクォートがないため、ブラウザによっては無効になります */</span>
      </div>
    </div>
  </div>
</div>

CSSコード表示

.bg-dyn1-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}
.bg-dyn1-demo-area {
  display: flex;
  justify-content: center;
}
.bg-dyn1-box {
  background-color: #ffffff;
  border: 2px dashed #adb5bd;
  padding: 25px;
  width: 100%;
  max-width: 500px;
  border-radius: 4px;
}
.bg-dyn1-label {
  font-size: 15px;
  font-weight: bold;
  margin-bottom: 20px;
  color: #333;
}
.bg-dyn1-visual {
  background-color: #f1f3f5;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
  border: 1px solid #dee2e6;
}
.bg-dyn1-btn {
  border: none;
  padding: 10px 15px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: bold;
  color: #fff;
  transition: opacity 0.2s;
}
.bg-dyn1-btn:hover {
  opacity: 0.8;
}
.bg-dyn1-btn-day {
  background-color: #ffc107;
  color: #333;
}
.bg-dyn1-btn-night {
  background-color: #1a237e;
}

/* 背景が切り替わるターゲット要素 */
.bg-dyn1-target {
  width: 100%;
  height: 150px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  
  background-image: url("https://picsum.photos/id/1015/600/300");
  background-size: cover;
  background-position: center;
  transition: background-image 0.5s ease;
  position: relative;
}
/* 暗くするフィルター */
.bg-dyn1-target::before {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background-color: rgba(0,0,0,0.3);
  border-radius: 4px;
}
.bg-dyn1-text {
  position: relative;
  color: #fff;
  letter-spacing: 2px;
  margin: 0;
  font-size: 24px;
  text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

.bg-dyn1-code {
  background-color: #282c34;
  color: #abb2bf;
  padding: 15px;
  font-family: monospace;
  font-size: 13px;
  border-radius: 4px;
  line-height: 1.6;
  border-left: 4px solid #198754;
}
.bg-dyn1-hl-green { color: #98c379; font-weight: bold; }
.bg-dyn1-hl-blue { color: #61afef; font-weight: bold; }
.bg-dyn1-hl-red { color: #e06c75; font-weight: bold; }
.bg-dyn1-hl-comment { color: #6c757d; font-style: italic; }

JavaScriptコード表示

setTimeout(() => {
  const btnDay = document.getElementById('bg-dyn1-btn-day');
  const btnNight = document.getElementById('bg-dyn1-btn-night');
  const targetBox = document.getElementById('bg-dyn1-target');
  const targetText = document.getElementById('bg-dyn1-text');

  if(btnDay && btnNight && targetBox && targetText) {
    btnDay.addEventListener('click', () => {
      // 💡 朝らしい明るい自然の画像
      const imgUrl = 'https://picsum.photos/id/1015/600/300';
      targetBox.style.backgroundImage = `url('${imgUrl}')`;
      targetText.textContent = 'MORNING';
    });

    btnNight.addEventListener('click', () => {
      // 💡 夜らしい都市の夜景画像
      const imgUrl = 'https://picsum.photos/id/122/600/300';
      targetBox.style.backgroundImage = `url('${imgUrl}')`;
      targetText.textContent = 'NIGHT';
    });
  }
}, 100);

WordPressのテーマ開発における背景画像パスの指定

WordPressで自作テーマやカスタマイズを行う際、「アイキャッチ画像をヘッダーの背景にしたい」「テーマ内にある画像を背景にしたい」といったケースはよくあります。

WordPress環境で背景画像を動的に出力する際は、WordPress専用のPHP関数を使用します。

テーマ内の画像を出力する場合
<?php echo get_template_directory_uri(); ?>/img/bg.jpgを使って、ドメインが変わっても自動で正しいパスが生成されるようにします。
投稿のアイキャッチ画像を背景にする場合
記事のループ内でget_the_post_thumbnail_url()を取得し、インラインスタイルのbackground-imageに出力します。

🐘 WordPressでの正しい背景画像パス指定

※以下は、WordPressの header.php などに記述する際のPHPコードのイメージです。

⭕️ 正解：PHP関数でパスを自動生成する

本番環境に移行しても、自動で正しいドメイン名に置き換わります。

❌ 失敗：ローカルの絶対パスを直書きする

本番環境で確実に画像が表示されなくなります！

/* 💡 アイキャッチ画像を背景にする場合の実務コード例 */
<?php
  // 投稿のアイキャッチ画像のURLを取得
  $bg_url = get_the_post_thumbnail_url(get_the_ID(), ‘large’);
?>

<!– 取得したURLをインラインスタイルで出力 –>
<div class=“post-header”
     style=“background-image: url(‘<?php echo esc_url($bg_url); ?>‘);“>
  <h1><?php the_title(); ?></h1>
</div>

HTMLコード表示

<div class="bg-dyn2-wrapper">
  <div class="bg-dyn2-demo-area">
    <div class="bg-dyn2-box">
      <div class="bg-dyn2-label">🐘 WordPressでの正しい背景画像パス指定</div>
      
      <div class="bg-dyn2-visual">
        <p style="font-size:12px; color:#555; margin-bottom:15px; line-height:1.5;">
          ※以下は、WordPressの <code>header.php</code> などに記述する際のPHPコードのイメージです。
        </p>

        <div class="bg-dyn2-mock-php">
          <p style="font-size:12px; font-weight:bold; color:#198754; margin:0 0 5px 0;">⭕️ 正解：PHP関数でパスを自動生成する</p>
          <div class="bg-dyn2-mock-code">
            <span class="bg-dyn2-hl-tag"><div</span> <span class="bg-dyn2-hl-attr">class=</span><span class="bg-dyn2-hl-string">"hero-bg"</span><br>
              <span class="bg-dyn2-hl-attr">style=</span><span class="bg-dyn2-hl-string">"</span><span class="bg-dyn2-hl-blue">background-image: url(</span><span class="bg-dyn2-hl-string">'</span><br>
                <span class="bg-dyn2-hl-php"><?php echo get_template_directory_uri(); ?></span><span class="bg-dyn2-hl-string">/img/main.jpg'</span><span class="bg-dyn2-hl-blue">)</span><span class="bg-dyn2-hl-string">;"</span><span class="bg-dyn2-hl-tag">></span><br>
            <span class="bg-dyn2-hl-tag"></div></span>
          </div>
          <p style="font-size:11px; color:#666; margin-top:5px;">本番環境に移行しても、自動で正しいドメイン名に置き換わります。</p>
        </div>

        <div class="bg-dyn2-mock-php" style="margin-top:20px;">
          <p style="font-size:12px; font-weight:bold; color:#dc3545; margin:0 0 5px 0;">❌ 失敗：ローカルの絶対パスを直書きする</p>
          <div class="bg-dyn2-mock-code">
            <span class="bg-dyn2-hl-tag"><div</span> <span class="bg-dyn2-hl-attr">class=</span><span class="bg-dyn2-hl-string">"hero-bg"</span><br>
              <span class="bg-dyn2-hl-attr">style=</span><span class="bg-dyn2-hl-string">"</span><span class="bg-dyn2-hl-blue">background-image: url(</span><span class="bg-dyn2-hl-string">'http://localhost/wp-content/themes/mytheme/img/main.jpg'</span><span class="bg-dyn2-hl-blue">)</span><span class="bg-dyn2-hl-string">;"</span><span class="bg-dyn2-hl-tag">></span><br>
            <span class="bg-dyn2-hl-tag"></div></span>
          </div>
          <p style="font-size:11px; color:#dc3545; margin-top:5px; font-weight:bold;">本番環境で確実に画像が表示されなくなります！</p>
        </div>
      </div>

      <div class="bg-dyn2-code">
        /* 💡 アイキャッチ画像を背景にする場合の実務コード例 */<br>
        <span class="bg-dyn2-hl-php"><?php</span><br>
          <span class="bg-dyn2-hl-comment">// 投稿のアイキャッチ画像のURLを取得</span><br>
          <span class="bg-dyn2-hl-red">$bg_url</span> = <span class="bg-dyn2-hl-green">get_the_post_thumbnail_url</span>(<span class="bg-dyn2-hl-green">get_the_ID</span>(), <span class="bg-dyn2-hl-string">'large'</span>);<br>
        <span class="bg-dyn2-hl-php">?></span><br>
        <br>
        <span class="bg-dyn2-hl-comment"><!-- 取得したURLをインラインスタイルで出力 --></span><br>
        <span class="bg-dyn2-hl-tag"><div</span> <span class="bg-dyn2-hl-attr">class=</span><span class="bg-dyn2-hl-string">"post-header"</span> <br>
             <span class="bg-dyn2-hl-attr">style=</span><span class="bg-dyn2-hl-string">"</span><span class="bg-dyn2-hl-blue">background-image: url('</span><span class="bg-dyn2-hl-php"><?php echo esc_url($bg_url); ?></span><span class="bg-dyn2-hl-blue">');</span><span class="bg-dyn2-hl-string">"</span><span class="bg-dyn2-hl-tag">></span><br>
          <span class="bg-dyn2-hl-tag"><h1></span><span class="bg-dyn2-hl-php"><?php the_title(); ?></span><span class="bg-dyn2-hl-tag"></h1></span><br>
        <span class="bg-dyn2-hl-tag"></div></span>
      </div>
    </div>
  </div>
</div>

CSSコード表示

.bg-dyn2-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}
.bg-dyn2-demo-area {
  display: flex;
  justify-content: center;
}
.bg-dyn2-box {
  background-color: #ffffff;
  border: 2px dashed #adb5bd;
  padding: 25px;
  width: 100%;
  max-width: 600px;
  border-radius: 4px;
}
.bg-dyn2-label {
  font-size: 15px;
  font-weight: bold;
  margin-bottom: 20px;
  color: #333;
}
.bg-dyn2-visual {
  background-color: #f1f3f5;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
  border: 1px solid #dee2e6;
}

/* モックアップ用のコード表示 */
.bg-dyn2-mock-php {
  background-color: #fff;
  padding: 15px;
  border: 1px solid #ced4da;
  border-radius: 4px;
}
.bg-dyn2-mock-code {
  background-color: #282c34;
  color: #abb2bf;
  padding: 10px;
  font-family: monospace;
  font-size: 13px;
  border-radius: 4px;
  line-height: 1.6;
}

.bg-dyn2-code {
  background-color: #282c34;
  color: #abb2bf;
  padding: 15px;
  font-family: monospace;
  font-size: 13px;
  border-radius: 4px;
  line-height: 1.6;
  border-left: 4px solid #0d6efd;
}

/* シンタックスハイライト用のクラス */
.bg-dyn2-hl-tag { color: #e06c75; font-weight: bold; }
.bg-dyn2-hl-attr { color: #d19a66; }
.bg-dyn2-hl-string { color: #98c379; }
.bg-dyn2-hl-php { background-color: #c678dd; color: #fff; padding: 0 4px; border-radius: 2px; font-weight: bold; }
.bg-dyn2-hl-blue { color: #61afef; }
.bg-dyn2-hl-green { color: #98c379; font-weight: bold; }
.bg-dyn2-hl-red { color: #e06c75; font-weight: bold; }
.bg-dyn2-hl-comment { color: #6c757d; font-style: italic; }

背景画像が表示されない！原因と解決策

Web制作を学んでいると、一度は「表示されない」という壁にぶつかります。

指定したはずの画像が出ない、または動いていたのに突然効かなくなったトラブルの裏には論理的な原因が存在します。

ここでは、初心者が実務でやらかす「背景画像が表示されない3大原因」と解決策を解説します。

背景画像が表示されない！原因と解決策

画像のパスが間違っている場合のチェック
要素の幅や高さが0になっている
キャッシュやCSSの記述ミスの確認

画像のパスが間違っている場合のチェック

背景画像が出ない原因の第1位は、「画像までのパス」の指定ミスです。

9割は、この「相対パスの罠」にハマっています。

背景画像が表示されない時は、デベロッパーツール（F12キー）の「Network（ネットワーク）」タブを開いてください。

赤字で「404 Not Found」と出ていれば、100%パスの指定ミスです。

url("../img/画像名.jpg")のように../を付け忘れていないか確認しましょう。

📁 フォルダ階層と正しいパス指定

一般的な実務のフォルダ構造

📁 my-project/
- 📄 index.html
- 📁 css/
  - 📄 style.css（★今ここに記述している）
- 📁 images/
  - 🖼️ bg.jpg（★ここを読み込みたい）

❌ 失敗 (404エラー)

url(“images/bg.jpg”)
cssフォルダの中を探してしまう

⭕️ 成功

url(“../images/bg.jpg”)
一度戻ってから画像を指定

/* ❌ 初心者のミス：HTMLと同じ感覚で書いてしまう */
.box-error {
background-image: url(“images/bg.jpg”);
}

/* ⭕️ 正解：CSSフォルダから「../」で一度外に出る */
.box-success {
background-image: url(“../images/bg.jpg”);
}

HTMLコード表示

<div class="bg-err1-wrapper">
  <div class="bg-err1-demo-area">
    <div class="bg-err1-box">
      <div class="bg-err1-label">📁 フォルダ階層と正しいパス指定</div>
      
      <div class="bg-err1-visual">
        <div class="bg-err1-folder-tree">
          <p style="font-size:12px; font-weight:bold; margin:0 0 10px 0; color:#555;">一般的な実務のフォルダ構造</p>
          <ul class="bg-err1-tree">
            <li>📁 my-project/
              <ul>
                <li>📄 index.html</li>
                <li>📁 <strong>css/</strong>
                  <ul>
                    <li style="color:#0d6efd; font-weight:bold;">📄 style.css（★今ここに記述している）</li>
                  </ul>
                </li>
                <li>📁 <strong>images/</strong>
                  <ul>
                    <li style="color:#198754; font-weight:bold;">🖼️ bg.jpg（★ここを読み込みたい）</li>
                  </ul>
                </li>
              </ul>
            </li>
          </ul>
        </div>

        <div style="display:flex; gap:10px; margin-top:20px;">
          <div class="bg-err1-result bg-err1-wrong">
            <p class="bg-err1-badge-red">❌ 失敗 (404エラー)</p>
            <div class="bg-err1-img-broken"></div>
            <p style="font-size:11px; color:#666; margin-top:10px;">url("images/bg.jpg")<br>cssフォルダの中を探してしまう</p>
          </div>
          <div class="bg-err1-result bg-err1-correct">
            <p class="bg-err1-badge-green">⭕️ 成功</p>
            <div class="bg-err1-img-ok"></div>
            <p style="font-size:11px; color:#666; margin-top:10px;">url("../images/bg.jpg")<br>一度戻ってから画像を指定</p>
          </div>
        </div>
      </div>

      <div class="bg-err1-code">
        /* ❌ 初心者のミス：HTMLと同じ感覚で書いてしまう */<br>
        <span class="bg-err1-hl-blue">.box-error</span> {<br>
          <span class="bg-err1-hl-red">background-image: url("images/bg.jpg");</span><br>
        }<br><br>

        /* ⭕️ 正解：CSSフォルダから「../」で一度外に出る */<br>
        <span class="bg-err1-hl-blue">.box-success</span> {<br>
          <span class="bg-err1-hl-green">background-image: url("../images/bg.jpg");</span><br>
        }
      </div>
    </div>
  </div>
</div>

CSSコード表示

.bg-err1-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}
.bg-err1-demo-area {
  display: flex;
  justify-content: center;
}
.bg-err1-box {
  background-color: #ffffff;
  border: 2px dashed #adb5bd;
  padding: 25px;
  width: 100%;
  max-width: 550px;
  border-radius: 4px;
}
.bg-err1-label {
  font-size: 15px;
  font-weight: bold;
  margin-bottom: 20px;
  color: #333;
}
.bg-err1-visual {
  background-color: #f1f3f5;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
  border: 1px solid #dee2e6;
}
.bg-err1-folder-tree {
  background-color: #fff;
  padding: 15px;
  border: 1px solid #ced4da;
  border-radius: 4px;
  font-family: monospace;
  font-size: 13px;
  line-height: 1.6;
}
.bg-err1-tree, .bg-err1-tree ul {
  list-style: none;
  padding-left: 20px;
  margin: 0;
}
.bg-err1-result {
  flex: 1;
  background-color: #fff;
  padding: 15px;
  border: 1px solid #ced4da;
  border-radius: 4px;
  text-align: center;
}
.bg-err1-badge-red {
  color: #dc3545;
  font-weight: bold;
  font-size: 12px;
  margin: 0 0 10px 0;
}
.bg-err1-badge-green {
  color: #198754;
  font-weight: bold;
  font-size: 12px;
  margin: 0 0 10px 0;
}
.bg-err1-img-broken {
  width: 100%;
  height: 80px;
  background-color: #e9ecef;
  border: 1px dashed #dc3545;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.bg-err1-img-broken::after {
  content: "🖼️ リンク切れ";
  color: #dc3545;
  font-size: 12px;
}
.bg-err1-img-ok {
  width: 100%;
  height: 80px;
  background-image: url("https://picsum.photos/id/16/300/100");
  background-size: cover;
  background-position: center;
  border-radius: 4px;
}

.bg-err1-code {
  background-color: #282c34;
  color: #abb2bf;
  padding: 15px;
  font-family: monospace;
  font-size: 13px;
  border-radius: 4px;
  line-height: 1.6;
  border-left: 4px solid #dc3545;
}
.bg-err1-hl-green { color: #98c379; font-weight: bold; }
.bg-err1-hl-blue { color: #61afef; font-weight: bold; }
.bg-err1-hl-red { color: #e06c75; font-weight: bold; }

要素の幅や高さが0になっている

パスがあっているのに画像が表示されない場合、次に疑うべきは「背景画像の幅と高さ」の問題です。

空の要素に背景画像を表示させる場合は、CSSでheight（またはmin-height）を指定して、壁紙を貼る「壁の広さ」を確保してください。

📏 要素の高さ（height）問題

※箱の存在を分かりやすくするため、赤い点線（border）をつけています。

❌ 失敗：高さの指定がない空のdiv

画像は指定されていますが、高さが0なので線にしか見えません。

⭕️ 成功：高さを指定したdiv

高さを確保することで、初めて背景画像が見えるようになります。

/* ❌ 初心者のミス：壁紙は貼ったが、壁の高さがない */
.empty-box {
  background-image: url(“hero.jpg”);
  background-size: cover;
  /* ↑ 高さが 0px なので一切見えません！ */
}

/* ⭕️ 正解：高さを指定して表示領域を作る */
.correct-box {
  background-image: url(“hero.jpg”);
  background-size: cover;
  height: 150px; /* 💡 ここが重要！ */
}

HTMLコード表示

<div class="bg-err2-wrapper">
  <div class="bg-err2-demo-area">
    <div class="bg-err2-box">
      <div class="bg-err2-label">📏 要素の高さ（height）問題</div>
      
      <div class="bg-err2-visual">
        <p style="font-size:12px; color:#555; margin-bottom:15px; line-height:1.5;">
          ※箱の存在を分かりやすくするため、赤い点線（border）をつけています。
        </p>

        <div style="margin-bottom:20px;">
          <p style="font-size:12px; font-weight:bold; color:#dc3545; margin:0 0 5px 0;">❌ 失敗：高さの指定がない空のdiv</p>
          <div class="bg-err2-zero-height"></div>
          <p style="font-size:11px; color:#666; margin-top:5px;">画像は指定されていますが、高さが0なので線にしか見えません。</p>
        </div>

        <div>
          <p style="font-size:12px; font-weight:bold; color:#198754; margin:0 0 5px 0;">⭕️ 成功：高さを指定したdiv</p>
          <div class="bg-err2-with-height"></div>
          <p style="font-size:11px; color:#666; margin-top:5px;">高さを確保することで、初めて背景画像が見えるようになります。</p>
        </div>
      </div>

      <div class="bg-err2-code">
        /* ❌ 初心者のミス：壁紙は貼ったが、壁の高さがない */<br>
        <span class="bg-err2-hl-blue">.empty-box</span> {<br>
          <span class="bg-err2-hl-green">background-image: url("hero.jpg");</span><br>
          <span class="bg-err2-hl-green">background-size: cover;</span><br>
          <span class="bg-err2-hl-comment">/* ↑ 高さが 0px なので一切見えません！ */</span><br>
        }<br><br>

        /* ⭕️ 正解：高さを指定して表示領域を作る */<br>
        <span class="bg-err2-hl-blue">.correct-box</span> {<br>
          <span class="bg-err2-hl-green">background-image: url("hero.jpg");</span><br>
          <span class="bg-err2-hl-green">background-size: cover;</span><br>
          <span class="bg-err2-hl-red">height: 150px;</span> /* 💡 ここが重要！ */<br>
        }
      </div>
    </div>
  </div>
</div>

CSSコード表示

.bg-err2-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}
.bg-err2-demo-area {
  display: flex;
  justify-content: center;
}
.bg-err2-box {
  background-color: #ffffff;
  border: 2px dashed #adb5bd;
  padding: 25px;
  width: 100%;
  max-width: 500px;
  border-radius: 4px;
}
.bg-err2-label {
  font-size: 15px;
  font-weight: bold;
  margin-bottom: 20px;
  color: #333;
}
.bg-err2-visual {
  background-color: #f1f3f5;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
  border: 1px solid #dee2e6;
}

/* ❌ 高さ0の箱 */
.bg-err2-zero-height {
  width: 100%;
  border: 2px dashed #dc3545; /* 存在を知らせるためのボーダー */
  background-image: url("https://picsum.photos/id/17/500/150");
  background-size: cover;
  background-position: center;
  /* heightの指定なし = 中身が空なので高さ0になる */
}

/* ⭕️ 高さありの箱 */
.bg-err2-with-height {
  width: 100%;
  border: 2px dashed #198754;
  background-image: url("https://picsum.photos/id/17/500/150");
  background-size: cover;
  background-position: center;
  /* 高さをしっかり確保 */
  height: 150px; 
}

.bg-err2-code {
  background-color: #282c34;
  color: #abb2bf;
  padding: 15px;
  font-family: monospace;
  font-size: 13px;
  border-radius: 4px;
  line-height: 1.6;
  border-left: 4px solid #0d6efd;
}
.bg-err2-hl-green { color: #98c379; font-weight: bold; }
.bg-err2-hl-blue { color: #61afef; font-weight: bold; }
.bg-err2-hl-red { color: #e06c75; font-weight: bold; }
.bg-err2-hl-comment { color: #6c757d; font-style: italic; }

幅や高さに関するプロパティを詳しく知りたい人は「【html&css】width（横幅）とheight（高さ）の指定とボックスモデル」を一読ください。

【html&css】width（横幅）とheight（高さ）の指定とボックスモデル

キャッシュやCSSの記述ミスの確認

それでもダメな場合は、「ブラウザの記憶（キャッシュ）」か「単純なスペルミス」のどちらかです。

スーパーリロードを行う
単なる更新（F5）ではなく、キャッシュを無視して強制的に最新状態を読み込む「スーパーリロード（Windows:Ctrl + F5、Mac:Cmd + Shift + R）」を実行してください。
デベロッパーツールで打ち消し線を確認
F12キーを押してデベロッパーツールを開きます。
プロパティ名が間違っている場合、Stylesパネル内で黄色い警告アイコンや打ち消し線が表示されます。

🔎 デベロッパーツールの警告シミュレート

CSSのスペルミスなどをすると、デベロッパーツール上では以下のように警告が出ます。これを見つけるのが最速の解決策です。

.hero-area {

height: 300px;

⚠️ ~~backgroud-image: url(“hero.jpg”);~~

⚠️ ~~background-image: url(“hero.jpg;~~

}

/* トラブルシューティング手順 */
1. 画面が変わらなければ、まずスーパーリロード (Ctrl+F5)
2. F12キーでデベロッパーツールを開く
3. 対象の要素を選択し、Stylesパネルを見る
4. プロパティに「⚠️」や「取り消し線」がないか確認する

HTMLコード表示

<div class="bg-err3-wrapper">
  <div class="bg-err3-demo-area">
    <div class="bg-err3-box">
      <div class="bg-err3-label">🔎 デベロッパーツールの警告シミュレート</div>
      
      <div class="bg-err3-visual">
        <p style="font-size:12px; color:#555; margin-bottom:10px;">
          CSSのスペルミスなどをすると、デベロッパーツール上では以下のように警告が出ます。これを見つけるのが最速の解決策です。
        </p>
        
        <div class="bg-err3-mock-devtools">
          <div class="bg-err3-mock-line">
            <span class="bg-err3-mock-selector">.hero-area {</span>
          </div>
          
          <div class="bg-err3-mock-line bg-err3-mock-indent">
            <span class="bg-err3-mock-prop">height</span>: <span class="bg-err3-mock-val">300px</span>;
          </div>

          <div class="bg-err3-mock-line bg-err3-mock-indent bg-err3-mock-error" title="Invalid property name">
            ⚠️ <del><span class="bg-err3-mock-prop">backgroud-image</span>: <span class="bg-err3-mock-val">url("hero.jpg")</span>;</del>
            <span class="bg-err3-mock-tooltip">Unknown property name (nが抜けている)</span>
          </div>

          <div class="bg-err3-mock-line bg-err3-mock-indent bg-err3-mock-error" title="Invalid property value">
            ⚠️ <del><span class="bg-err3-mock-prop">background-image</span>: <span class="bg-err3-mock-val">url("hero.jpg</span>;</del>
            <span class="bg-err3-mock-tooltip">Invalid property value (括弧が閉じていない)</span>
          </div>

          <div class="bg-err3-mock-line">
            <span class="bg-err3-mock-selector">}</span>
          </div>
        </div>
      </div>

      <div class="bg-err3-code">
        /* トラブルシューティング手順 */<br>
        1. 画面が変わらなければ、まずスーパーリロード (Ctrl+F5)<br>
        2. F12キーでデベロッパーツールを開く<br>
        3. 対象の要素を選択し、Stylesパネルを見る<br>
        4. プロパティに「⚠️」や「取り消し線」がないか確認する
      </div>
    </div>
  </div>
</div>

CSSコード表示

.bg-err3-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}
.bg-err3-demo-area {
  display: flex;
  justify-content: center;
}
.bg-err3-box {
  background-color: #ffffff;
  border: 2px dashed #adb5bd;
  padding: 25px;
  width: 100%;
  max-width: 550px;
  border-radius: 4px;
}
.bg-err3-label {
  font-size: 15px;
  font-weight: bold;
  margin-bottom: 20px;
  color: #333;
}
.bg-err3-visual {
  background-color: #f1f3f5;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
  border: 1px solid #dee2e6;
}

/* デベロッパーツールのモックアップ */
.bg-err3-mock-devtools {
  background-color: #fff;
  border: 1px solid #ced4da;
  padding: 15px;
  border-radius: 4px;
  font-family: Consolas, Monaco, monospace;
  font-size: 13px;
  color: #333;
}
.bg-err3-mock-line {
  line-height: 1.8;
}
.bg-err3-mock-indent {
  padding-left: 20px;
}
.bg-err3-mock-selector { color: #a11; }
.bg-err3-mock-prop { color: #c80000; }
.bg-err3-mock-val { color: #1a1aa6; }

/* エラー行の装飾 */
.bg-err3-mock-error {
  background-color: #fff3f3;
  position: relative;
  cursor: help;
}
.bg-err3-mock-error del {
  color: #888; /* 打ち消し線 */
}
.bg-err3-mock-error .bg-err3-mock-prop, 
.bg-err3-mock-error .bg-err3-mock-val {
  color: #888;
}
/* ツールチップ（エラー説明） */
.bg-err3-mock-tooltip {
  visibility: hidden;
  background-color: #333;
  color: #fff;
  text-align: center;
  border-radius: 4px;
  padding: 4px 8px;
  font-size: 11px;
  position: absolute;
  z-index: 1;
  bottom: 110%;
  left: 20px;
  opacity: 0;
  transition: opacity 0.3s;
  white-space: nowrap;
}
.bg-err3-mock-error:hover .bg-err3-mock-tooltip {
  visibility: visible;
  opacity: 1;
}

.bg-err3-code {
  background-color: #282c34;
  color: #abb2bf;
  padding: 15px;
  font-family: sans-serif;
  font-size: 13px;
  font-weight: bold;
  border-radius: 4px;
  line-height: 1.8;
  border-left: 4px solid #dc3545;
}

CSSの優先順位やclass・idの詳細度について詳しく知りたい人は「CSSの優先順位はどう決まる？どこに書くかと外部CSSの読み込み＆インラインの記述」を一読ください。

CSSの優先順位はどう決まる？どこに書くかと外部CSSの読み込み＆インラインの記述

まとめ

分かりやすいようにまとめを記載します。

本記事のまとめ

背景画像はbackground-image: url("パス");で指定し、CSSファイルからの相対パスに注意する。
情報として意味を持つ画像は<img>タグ、装飾にはbackground-imageを使い分ける。
サイズの調整にはbackground-sizeのcoverやcontainを使用する。
数値でサイズを指定する際、画像を歪ませないために「幅」を示す1つの数値だけを指定する。
画像の意図しないタイリングを防ぐため、原則としてbackground-repeat: no-repeat;を併記する。
画像を暗くする場合はlinear-gradientをカンマ区切りで重ね、背景のみを透過させる場合は疑似要素（::before）を使用する。
複数の背景画像を指定する場合、カンマ区切りで先頭に記述したものが最前面レイヤーとなる。
ホバー時のズームアニメーションは、疑似要素に対してtransform: scale()を適用しパフォーマンス低下を防ぐ。
パララックス効果（attachment: fixed）はiOS端末で不具合が生じるため、実務ではメディアクエリ等での制御を要する。
背景のSVG画像の色変更にはmask-imageを使用し、Base64の直接埋め込みは極小サイズの画像に限定する。
JavaScriptでの動的変更時はパスの基準位置のズレに注意し、WordPress環境では専用のPHP関数（get_template_directory_uri()等）でパスを出力する。
画像が表示されない場合の原因は、「パスの指定ミス」「要素の高さが0」「ブラウザのキャッシュやスペルミス」のいずれかである。