過去バージョン

この本文には実行可能なタグ等が含まれるため、安全のためHTMLソースとして表示しています。本文データは変更していません。

<table border="1" cellpadding="6" cellspacing="0" style="border-collapse:collapse;background:#fffbea;border:1px solid #f4c430;margin:1em 0;width:100%"><tr><td style="background:#f4c430;color:#000;font-weight:bold;padding:8px">この記事の要点</td></tr><tr><td style="padding:10px"><ul><li><strong>background-image</strong> は要素の<strong>背景画像</strong>を指定する CSS プロパティ</li><li>値は <code>url("...")</code> / <code>linear-gradient(...)</code> / <code>radial-gradient(...)</code> / <code>none</code> など</li><li><strong>カンマ区切り</strong>で複数指定でき、<strong>先に書いたものほど上に重なる</strong></li><li>画像のサイズ・位置・繰り返しは <code>background-size</code> / <code>background-position</code> / <code>background-repeat</code> で制御する</li><li><code><img></code> と違って<strong>意味のない装飾画像</strong>専用。意味のある画像は <code><img alt="..."></code> を使う</li></ul></td></tr></table>
<h2>background-image プロパティとは</h2>

<p><strong>background-image</strong> は CSS で要素の<strong>背景画像</strong>を指定するプロパティです。画像ファイル（PNG / JPG / WebP / SVG / GIF）を URL で読み込んだり、CSS グラデーション関数（<code>linear-gradient</code> / <code>radial-gradient</code>）を直接書いて<strong>画像ファイルなしで背景</strong>を作ったりできます。</p>

<h2>基本構文</h2>
<pre style="background:#1e293b;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;line-height:1.5"><code class="language-css">.hero {
  background-image: url("/img/hero.jpg");
}

.cta {
  /* グラデーション */
  background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.no-bg {
  background-image: none;   /* 背景画像を無効化 */
}</code></pre>
<h2>主な値</h2>

<table border="1" cellpadding="6" cellspacing="0" style="border-collapse:collapse;width:100%">
<thead><tr style="background:#e3f2fd"><th>値</th><th>意味</th></tr></thead>
<tbody>
<tr><td><code>url("path")</code></td><td>画像ファイルを指定（相対 / 絶対 / data URI）</td></tr>
<tr><td><code>linear-gradient(...)</code></td><td>直線グラデーション</td></tr>
<tr><td><code>radial-gradient(...)</code></td><td>放射状グラデーション</td></tr>
<tr><td><code>conic-gradient(...)</code></td><td>円錐グラデーション</td></tr>
<tr><td><code>repeating-linear-gradient(...)</code></td><td>繰り返し直線グラデーション</td></tr>
<tr><td><code>none</code></td><td>背景画像なし（初期値）</td></tr>
<tr><td><code>inherit</code> / <code>initial</code> / <code>unset</code></td><td>CSS 共通キーワード</td></tr>
</tbody>
</table>

<h2>複数の背景画像を重ねる</h2>

<p>カンマ区切りで<strong>複数の背景</strong>を指定でき、<strong>先に書いたものが上</strong>に重なります。半透明 PNG やグラデーションを重ねて<strong>オーバーレイ表現</strong>に多用されます。</p>
<pre style="background:#1e293b;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;line-height:1.5"><code class="language-css">.banner {
  background-image:
    linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),  /* 上：黒の半透明 */
    url("/img/hero.jpg");                                /* 下：実画像 */
  background-size: cover;
  background-position: center;
  color: #fff;
}</code></pre>
<h2>関連プロパティと組み合わせる</h2>

<table border="1" cellpadding="6" cellspacing="0" style="border-collapse:collapse;width:100%">
<thead><tr style="background:#e3f2fd"><th>プロパティ</th><th>役割</th></tr></thead>
<tbody>
<tr><td><code>background-size</code></td><td><code>cover</code> / <code>contain</code> / 数値でサイズ指定</td></tr>
<tr><td><code>background-position</code></td><td><code>center</code> / <code>top right</code> / 数値で位置指定</td></tr>
<tr><td><code>background-repeat</code></td><td><code>no-repeat</code> / <code>repeat-x</code> / <code>repeat-y</code></td></tr>
<tr><td><code>background-attachment</code></td><td><code>fixed</code> でパララックス風の固定背景</td></tr>
<tr><td><code>background-color</code></td><td>画像の読み込み失敗時のフォールバック色</td></tr>
<tr><td><code>background</code></td><td>上記すべてのショートハンド</td></tr>
</tbody>
</table>

<h2>典型レイアウト：cover でフィット</h2>
<pre style="background:#1e293b;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;line-height:1.5"><code class="language-css">.hero {
  background-image: url("/img/hero.jpg");
  background-size: cover;        /* 要素全体を覆う */
  background-position: center;   /* 中央に寄せる */
  background-repeat: no-repeat;
  height: 480px;
}</code></pre>
<h2>注意点</h2>

<ul>
<li><strong>背景画像は alt が付けられない</strong> → 意味のある画像は <code><img></code> を使う（アクセシビリティ）</li>
<li>HTTPS ページから <code>http://</code> の画像 URL を読むと<strong>混在コンテンツ</strong>でブロックされる</li>
<li><code>url()</code> 内のパスは<strong>CSS ファイル基準</strong>の相対パスになる</li>
<li>大きすぎる画像は LCP（Largest Contentful Paint）悪化の原因。<strong>WebP / AVIF</strong> や <strong>適切な圧縮</strong>を推奨</li>
<li><code>background-color</code> も併記しておくと、画像読み込み失敗時に<strong>真っ白</strong>にならない</li>
</ul>

<h2>SVG・グラデーションを混ぜたデザイン例</h2>

<p>SVG をデータ URI として読み込み、その上に半透明グラデーションを重ねるとリッチな見出しが作れます。SVG はベクタなので拡縮しても劣化しません。CSS ファイル内で直接書けるため画像アセットの管理コストも下がり、テーマカラーをサイトごとに差し替える運用にも向きます。</p>

<h2>パフォーマンス上の注意</h2>

<p>背景画像はページ読み込み時に追加の HTTP リクエストを発生させ、特にヒーロー画像のような大きな画像は <strong>LCP</strong>（Largest Contentful Paint）の主要因になります。重要な背景画像には <code><link rel="preload" as="image"></code> でプリロードを指定し、画像形式は <strong>WebP</strong> や <strong>AVIF</strong> を優先するとファイルサイズを半分以下に抑えられます。装飾用の小さな模様は <strong>data URI</strong> で CSS に埋め込み、複数のサイズが必要なら後述の <code>image-set()</code> や <code><picture></code> 相当の機能で対応します。CSS 内で <code>url()</code> を多数記述するとブラウザは全件パースしますが、ダウンロードは<strong>実際にスタイルが適用されたとき</strong>に発生するため、メディアクエリで分岐させた背景画像は不要な転送が走りません。</p>

<h2>data URI で画像をインライン化</h2>

<p>小さなアイコンは Base64 で <code>url()</code> 内に埋め込めばリクエスト数を減らせます。ただし<strong>キャッシュが効かない</strong>ためサイズの大きい画像には不向き。</p>
<pre style="background:#1e293b;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;line-height:1.5"><code class="language-css">.bullet {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns=&apos;http://www.w3.org/2000/svg&apos; viewBox=&apos;0 0 8 8&apos;><circle cx=&apos;4&apos; cy=&apos;4&apos; r=&apos;3&apos; fill=&apos;%233498db&apos;/></svg>");
}</code></pre>
<h2>レスポンシブ：image-set() で高 DPI 対応</h2>

<p>Retina 等の高 DPI ディスプレイ向けに、<strong>image-set()</strong> で密度別の画像を切り替えられます。</p>
<pre style="background:#1e293b;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;line-height:1.5"><code class="language-css">.hero {
  background-image: image-set(
    url("/img/hero.jpg")    1x,
    url("/img/hero@2x.jpg") 2x,
    url("/img/hero@3x.jpg") 3x
  );
}</code></pre>
<h2>関連</h2>

<ul>
<li><a href="/article/10700">backgroundプロパティ</a> — 背景関連のショートハンド</li>
<li>background-color プロパティ — 背景色</li>
<li>background-size プロパティ — 背景画像サイズ</li>
<li>background-position プロパティ — 背景画像位置</li>
<li>linear-gradient 関数 — グラデーション値</li>
</ul>