【2026年7月最新】CSSのbackground-imageとは？使い方・サイズ・位置・複数指定・グラデーションまで完全ガイド
aikanri-admin
この記事の内容
「背景画像を設定したのに表示されない」「画像が繰り返して表示されてしまう」「スマホで見たら画像が崩れている」——CSSのbackground-imageを使う際によく発生するトラブルです。
CSSのbackground-imageプロパティは、Webページの要素に背景画像を設定するための強力なツールです。単純な画像の配置から、グラデーション・複数画像の重ね合わせ・レスポンシブな調整まで、使いこなせばWebデザインの表現力が格段に広がります。
この記事では、background-imageの基本構文から始め、background-size・background-position・background-repeatなどの関連プロパティ、複数背景・グラデーションの活用、パフォーマンス最適化まで実用的なコード例付きで体系的に解説します。
代表菅澤
AI鬼管理山崎
01 BG IMAGE BASICS background-imageとは――CSSで背景画像を設定する基礎 url()関数の使い方とHTMLタグのimgとの違いを理解する
background-imageはCSSプロパティのひとつで、HTMLの要素（div・section・bodyなど）の背景に画像を設定するために使います。HTMLの<img>タグが「コンテンツとしての画像」を表示するのに対し、background-imageは「装飾・デザインとしての背景画像」を表示するために使います。
📚 用語解説
background-imageプロパティ：CSSで要素の背景に画像やグラデーションを設定するプロパティ。「background-image: url(画像のパス);」の形式で記述します。<img>タグと違い、テキストなどのコンテンツの後ろに表示され、画像の上にコンテンツを重ねることができます。SEO的にはalt属性が設定できないため、コンテンツとして意味のある画像にはimgタグを使い、背景のみはbackground-imageで使い分けます。
1-1. 基本構文とurl()関数
background-imageの基本的な書き方は以下のとおりです。url()関数の中に画像のパス（URLまたは相対パス）を指定します。
1-2. <img>タグとbackground-imageの使い分け
| 比較項目 | <img>タグ | background-image（CSS） |
|---|---|---|
| 用途 | コンテンツとして意味のある画像 | 装飾・デザイン目的の背景画像 |
| SEO | altテキストでSEO効果あり | alt設定不可。SEO効果なし |
| アクセシビリティ | スクリーンリーダーが読む | スクリーンリーダーは無視 |
| テキスト重ね合わせ | 基本的に難しい | コンテンツを自由に重ねられる |
| サイズ制御 | width/height属性で制御 | background-sizeで柔軟に制御 |
| レスポンシブ | srcset/sizesで対応 | media queryでサイズ・位置を切り替え |
「この画像がなくてもページの意味は伝わるか？」という問いで判断します。ヒーロー画像・パターン背景・テクスチャはbackground-image、商品写真・ブログのアイキャッチ・プロフィール写真はimgタグが適切です。SEO対策でページの主要画像にalt属性を付けたい場合は必ずimgタグを使いましょう。
1-3. background-colorと組み合わせる
background-imageはbackground-colorと組み合わせて使えます。画像が読み込まれる前や、画像がない部分は背景色が表示されます。PNGやWebPなど透明部分のある画像では、透明部分に背景色が透けて見えます。
代表菅澤
02 BACKGROUND REPEAT background-repeatで繰り返しを制御する タイル状表示をコントロールする4つの値を使い分ける
background-imageのデフォルト設定では、画像が要素の幅・高さいっぱいにタイル状に繰り返し表示されます。background-repeatプロパティでこの繰り返し設定を変更できます。
| 値 | 動作 | 使いどころ |
|---|---|---|
| repeat（デフォルト） | X・Y両方向に繰り返す | パターン・テクスチャ背景 |
| repeat-x | X方向（横）のみ繰り返す | 横方向のストライプパターン |
| repeat-y | Y方向（縦）のみ繰り返す | 縦方向のストライプパターン |
| no-repeat | 繰り返さない（1枚だけ表示） | ヒーロー画像・ロゴ・アイコン配置 |
| space | 均等に配置（端の余白で調整） | アイコンパターンをきれいに配置 |
| round | 均等に配置（画像をリサイズ） | タイルを画面幅に合わせたいとき |
実際のWebデザインでは、background-repeat: no-repeatを使うケースが最も多いです。ヒーローエリア・セクション背景・CTAバナーなど、大きな画像を1枚使う場合はno-repeatが基本設定になります。反対に、小さなパターン画像を繰り返してテクスチャ感を出したい場合はrepeatを使います。
03 BACKGROUND SIZE background-sizeで画像サイズを自在に調整する cover・containの違いと数値指定のベストプラクティス
background-sizeプロパティは、背景画像のサイズを制御します。最も重要な値はcoverとcontainで、この2つを正しく理解することがレスポンシブ対応の基本になります。
📚 用語解説
background-size: cover：背景画像を要素全体を覆うように拡大・縮小します。画像のアスペクト比（縦横比）は保持されますが、要素のサイズに合わせて画像の一部がはみ出してクリップされることがあります。ヒーロー画像やフルスクリーン背景では最も多く使われる設定です。
📚 用語解説
background-size: contain：背景画像を要素の中に収まるよう拡大・縮小します。画像全体が表示されますが、要素との比率が違う場合は余白（隙間）が生まれます。ロゴや重要な全体像を見せたい場合に使います。
| 値 | 動作 | 画像の切れ | 余白 | 使いどころ |
|---|---|---|---|---|
| cover | 要素を画像で完全に覆う | あり（はみ出しクリップ） | なし | ヒーロー・セクション背景 |
| contain | 画像全体を要素内に収める | なし | あり（background-colorで埋める） | ロゴ・アイコン・全体表示 |
| 100% auto | 幅を100%に合わせ高さ自動 | 縦にははみ出す可能性 | なし | 横幅に合わせたいとき |
| auto 100% | 高さを100%に合わせ幅自動 | 横にははみ出す可能性 | なし | 縦長要素の縦いっぱい |
| 200px 150px | px指定で固定サイズ | サイズ次第 | サイズ次第 | アイコン・固定サイズパターン |
background-size: coverを設定しても、要素（div等）にheightが設定されていないと背景が表示されないことがあります。要素に明示的なheight（100vh、300px等）を設定するか、コンテンツで高さが決まる状態にしておく必要があります。
AI鬼管理山崎
04 BACKGROUND POSITION background-positionで位置を完全コントロール キーワード・数値・パーセンテージで画像の表示位置を指定する
background-positionプロパティは、背景画像の表示位置（アンカーポイント）を指定します。「画像の中心を常に表示したい」「上部の重要な部分が切れないようにしたい」という場面で使います。
| 指定方法 | 例 | 動作 |
|---|---|---|
| キーワード | center center | 水平・垂直中央（最もよく使う） |
| キーワード組み合わせ | left top | 左上揃え |
| パーセンテージ | 50% 30% | 水平50%・垂直30%の位置 |
| px指定 | 20px 50px | 左から20px・上から50px |
| 単一キーワード | center | 水平中央（垂直はcenterとして扱われる） |
background-attachment: fixed を設定すると、スクロールしても背景画像が固定されたままの「パララックス効果」が作れます。ただしモバイルブラウザではサポートが不安定な場合があるため、デスクトップ向けの演出として使うのが安全です。
05 MULTIPLE & GRADIENT 複数背景とグラデーションの重ね合わせ モダンなWebデザインに欠かせない高度な背景テクニック
CSSのbackground-imageは複数の画像やグラデーションを重ね合わせることができます。コンマ（,）で区切って複数の値を指定すると、最初に書いたものが最前面に表示されます。
5-1. 画像とグラデーションを重ねるパターン
ヒーローエリアでよく使われるパターンが「暗色グラデーション＋背景画像の重ね合わせ」です。白いテキストを背景画像の上に載せるとき、グラデーションで画像を少し暗くすることでテキストの視認性が上がります。
📚 用語解説
linear-gradient()：CSSで線形グラデーション（直線的な色の変化）を作成する関数。「linear-gradient(方向, 開始色, 終了色)」の形式で記述します。「to bottom」で上から下へ、「45deg」で45度の方向へグラデーションが進みます。background-imageプロパティで画像と同様に使えます。
5-2. 複数の画像を重ねる
複数背景を指定するとき、background-size・background-repeat・background-positionも同様にカンマ区切りで複数の値を指定できます。値の数が画像数と一致するよう注意が必要です。
5-3. CSSグラデーションのみで背景を作る
代表菅澤
06 PERFORMANCE & RESPONSIVE パフォーマンス・レスポンシブ対応の実践 スマホ対応と画像最適化で表示速度とUXを向上させる
Webサイトの背景画像はファイルサイズが大きいとページ読み込みが遅くなり、SEO・UXに悪影響を与えます。また、PCとスマートフォンで適切な背景設定が異なることも考慮が必要です。
6-1. メディアクエリでレスポンシブ対応
| 最適化手法 | 効果 | 実装方法 |
|---|---|---|
| WebP形式の使用 | JPEG比30〜40%の容量削減 | url('hero.webp')で指定、fallbackはJPEG |
| 適切な解像度 | 不要なデータを減らす | PCは1920px、モバイルは768px以下の画像を用意 |
| lazy loading | スクロール時に読み込む | JavaScriptで制御、初期ロードを軽減 |
| CSS will-change | GPU描画を最適化 | will-change: transform（パララックス時） |
| 画像圧縮 | ファイルサイズを削減 | TinyPNG・Squoosh等のツールで事前圧縮 |
📚 用語解説
WebP（ウェブピー）：Googleが開発したWebサイト向けの画像フォーマット。JPEGやPNGと比べて同じ画質でファイルサイズが30〜40%小さくなります。主要ブラウザ（Chrome・Firefox・Safari・Edge）でサポートされています。background-imageでWebPを使う場合、古いブラウザ向けのフォールバックを検討しましょう。
background-attachment: fixedはiOS SafariとAndroidの一部ブラウザで正しく動作しないことがあります。モバイルでパララックス効果を出したい場合は、JavaScriptでスクロール量を取得してtranslate3dで移動させる代替実装が安定しています。
07 BACKGROUND SHORTHAND backgroundショートハンドでコードをスッキリさせる 6つのプロパティを1行にまとめる書き方と書き順のルール
background-image・background-color・background-repeat・background-position・background-size・background-attachmentは、backgroundプロパティにまとめて一行で書くことができます（ショートハンド）。
backgroundショートハンドを使うと、指定しなかったプロパティはデフォルト値にリセットされます。例えばbackground-colorだけ上書きしたくてbackground: #333;と書くと、background-imageなどもリセットされてしまいます。ショートハンドは全プロパティをまとめて指定するとき、個別プロパティは1つだけ変えたいときと使い分けましょう。
| ショートハンドの書き順 | 値の例 | 備考 |
|---|---|---|
| color | #1a1a2e | 背景色。最後に書くことが多い |
| image | url('bg.jpg') | 画像パス |
| repeat | no-repeat | 繰り返し設定 |
| position | center center | 位置指定 |
| / size | / cover | positionの直後に「/」で区切ってsize |
| attachment | fixed | 省略可能（デフォルトはscroll） |
#1a1a2e
url('hero.jpg')
no-repeat
center / cover
08 CLAUDE CODE CSS Claude CodeでCSS背景設定を自動化する AIへの日本語指示でbackground-imageの実装を高速化する
background-imageのCSSを毎回手書きするのは時間がかかります。Claude Codeを使えば、日本語でデザイン要件を伝えるだけでCSSコードを自動生成できます。弊社（株式会社GENAI）では、Webサイトのデザイン更新やCSSの最適化にClaude Codeを活用しています。
特に便利なのが「動かない・表示されない」系のデバッグです。background-imageが表示されない原因（画像パスのミス・高さ未設定・background-colorの上書きなど）をClaude Codeが自動で特定して修正コードを提示してくれます。
弊社の実感では、弊社内でCSS修正にかかる工数が週10時間→週1時間に削減されています（概算）。LPのデザイン変更・ヒーロー画像の更新・グラデーションの調整など、繰り返し発生するCSS作業をClaude Codeに任せることで、デザイナーとエンジニアの稼働が圧縮されています。
代表菅澤
AI鬼管理山崎
この記事で解説したbackground-imageのプロパティを理解した上でClaude Codeを使うと、AIが出したコードの意図が分かり修正・改善の指示も的確になります。まずこの記事で基礎を押さえ、実装はClaude Codeに任せるというハイブリッドな学習が最も効率的です。
WebサイトのCSS最適化・レスポンシブ対応をAI鬼管理が支援
background-imageの設定・グラデーション実装・レスポンシブ対応まで、Claude Codeを使ったCSSの自動化で工数を大幅削減します。
AI鬼管理山崎
NEXT STEP
この記事の内容を、あなたのビジネスで
実践してみませんか？
AI活用を自社で回せるようになりたい方へ
AI鬼管理
Claude Code・Cowork導入支援から業務設計・社内浸透まで実践ベースで伴走。「自社で回せる組織」を90日で作る経営者向けトレーニング。
よくある質問
Q. CSSのbackground-imageで画像が表示されません。原因は何ですか？
A. 主な原因は①画像ファイルのパスが間違っている（URLや相対パスを確認）②要素のheightが設定されていない（高さが0だと背景が見えない）③background-repeatがデフォルトのrepeatで画像サイズが大きすぎる④ブラウザキャッシュが原因（Ctrl+F5でハードリフレッシュ）——の4つです。開発者ツール（F12）のCSSパネルで設定が正しく適用されているか確認するのが最短の対処法です。
Q. background-imageにurl()なしで直接パスを書けますか？
A. 書けません。background-imageプロパティでは必ずurl()関数で画像パスを囲む必要があります。url('hero.jpg')のようにシングルクォートで囲むのが推奨ですが、クォートなしのurl(hero.jpg)でも動作します。
Q. background-size: coverとcontainの違いを一言で教えてください。
A. coverは「画像で要素を完全に覆う（はみ出し許容）」、containは「画像全体を要素に収める（余白許容）」です。ヒーロー画像はcover、ロゴや全体を見せたいイラストはcontainが適切です。
Q. background-imageにグラデーションも指定できますか？
A. できます。background-imageにはurl()の他にlinear-gradient()やradial-gradient()も指定できます。「background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%);」のように書くと画像ファイルなしでグラデーション背景が作れます。また「background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.2)), url('hero.jpg');」のようにカンマで区切って重ね合わせることも可能です。
Q. スマートフォンで背景画像をレスポンシブ対応するにはどうすればいいですか？
A. @mediaクエリを使って画面幅に応じてbackground-imageを切り替えます。モバイル用に小さいサイズ（幅768px以下）の画像を別途用意して、「@media (max-width: 768px) { .hero { background-image: url('hero-mobile.jpg'); } }」のように切り替えましょう。また「background-size: cover; background-position: center top;」の組み合わせでスマホでも上部が適切に表示されます。
Q. backgroundショートハンドはどのように書きますか？
A. 「background: [color] [image] [repeat] [position] / [size];」の順序で書きます。例えば「background: #1a1a2e url('hero.jpg') no-repeat center / cover;」です。background-sizeはbackground-positionの直後に「/」で区切って書く点に注意してください。ショートハンドを使うと省略したプロパティがリセットされるため、全プロパティをまとめて指定する場合のみ使うことを推奨します。
Q. background-imageの画像をWebP形式に変換するメリットはありますか？
A. あります。WebPはJPEGに比べて同じ画質で約30〜40%ファイルサイズが小さくなるため、ページ読み込みが速くなり、Core Web VitalsやSEOにも有利です。主要ブラウザはWebPをサポートしており、「background-image: url('hero.webp');」でそのまま使えます。古いブラウザ対応が必要な場合は、picure要素とWebFetch APIを組み合わせたJSフォールバックを検討してください。
Claude Codeで業務自動化を90日で叩き込む
経営者向けの伴走型パーソナルトレーニング
Claude Code を業務に落とし込む
専門研修コース一覧
受講者本人の業務を題材に、「使いこなせる」状態になるまで伴走する研修プログラム。1対1特化型・ハンズオン・法人講座の3コースを展開中。業務特化・実装まで踏み込むタイプのClaude Code研修です。
研修コース一覧を見る →AI鬼管理へのお問い合わせ
この記事を読んで気になった方へ。
AI鬼管理の専門スタッフが、御社に最適な
業務自動化プランを無料でご提案します。
- AI業務自動化サービス「AI鬼管理」を運営 — Claude Code を活用し、経営者の業務を「AIエージェントに任せる仕組み」へ転換するパーソナルトレーニングを 伴走構築 で提供。日報・採用・問い合わせ対応・経費精算・議事録・データ集計・営業リスト等の定型業務を、AIに代行させる体制を経営者と一緒に作り込む
- Claude Code 実装ノウハウを 経営者・法人クライアント に直接指導。生成AIを「便利ツール」ではなく 「業務を任せる存在」 として運用する手法を体系化
- 「やらせ切る管理」メソッドの開発者。シンゲキ株式会社（2021年設立・鬼管理専門塾運営）にて累計3,000名以上の学習者を志望校合格に導いた管理メソッドを、AI × 経営者支援 に転用
- 著書『3カ月で志望大学に合格できる鬼管理』(幻冬舎)、『親の過干渉こそ、最強の大学受験対策である。』(講談社)
- メディア出演: REAL VALUE / カンニング竹山のイチバン研究所 / ええじゃないかBiz 他
- 明治大学政治経済学部卒
