背景画像プロパティ
最終更新：2026-09-13
background-image 背景画像プロパティ
background-image は要素に 1 つ以上の背景画像を設定し、url() パスとグラデーション関数に対応します。複数の背景はカンマ区切りで、先に書いた画像が上層になります。通常は background-size や background-position と組み合わせて使われます。
| カテゴリ | |
|---|---|
| 初期値 | none |
| 継承 | いいえ |
| 適用対象 | all |
| アニメーションタイプ | discrete |
| CSS バージョン | CSS1 |
| 状態 | 標準 |
📝 構文
background-image: none | <image> | linear-gradient() | radial-gradient();⚙️ 値
| 値 | タイプ | 説明 |
|---|---|---|
none | キーワード | 背景画像なし |
<image> | タイプ | url() 画像またはグラデーション |
linear-gradient() | radial-gradient() | 関数 | 線形または放射状のグラデーション |
▶ 例
以下のコードを編集して、プレイグラウンドでライブ結果を確認してください：
🌐 ブラウザーサポート
| ブラウザー |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| background-image | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| すべての主要ブラウザーでサポート | |||||
ヒント： 背景画像と背景色を組み合わせられます。画像は色の上に描画され、色は画像の透明な部分から見えます。
ヒント： グラデーション関数（linear-gradient、radial-gradient）で生成された画像も背景画像に含まれます。
❓ よくある質問
Q複数の背景画像を重ねるにはどうすればよいですか？
A画像をカンマで区切ります。例: background-image: url(a.png), url(b.png), linear-gradient(...); — 最初のものが最上位です。各層は background-size や background-position で個別に制御でき、層と 1 対 1 に対応するカンマ区切りの値を使用します。
Q背景画像の読み込みに失敗するとどうなりますか？
Abackground-color も設定されている場合、画像が失敗した（パス違い・ブロック・非対応形式）ときは色がフォールバックとして表示されます。それ以外の場合は背景は透明になります。background-image には alt テキストがない点に注意してください。純粋に装飾的な背景画像は重要な情報を持たせてはいけません。意味のあるコンテンツには <img> に代替テキストを付けて使用してください。
Qbackground-image と <img> タグの違いは何ですか？
Abackground-image は CSS の表現層の一部です。ドキュメントフローに含まれず、検索エンジンにインデックスされず、alt の意味がなく、自由に切り抜きや配置ができます。装飾的な背景に適しています。<img> は HTML のコンテンツ層です。alt テキストがあり、インデックスされて選択可能で、意味のあるコンテンツを意図しています。読み込みに失敗したとき、<img> は alt にフォールバックしますが、背景画像は単に消えます。
Q背景のグラデーションの書き方は？
Aグラデーションは背景画像です。linear-gradient(135deg, #667eea, #764ba2) は 135 度の方向に変化し、radial-gradient(circle, #fff, #333) は中心から外側に広がります。より複雑な効果のために複数の層を重ね、フォールバックとして純色の background-color を残してください。
🏷️ 関連プロパティ
💡 関連事例
📚 関連チュートリアル
