background-image
background-image は CSS のプロパティで、要素に 1 つ以上の背景画像を設定します。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 1 | 12 | 1 | 1 | 18 | 1 | |
multiple backgrounds 複数の背景 | 1 | 12 | 3.6 | 1.3 | 18 | 1 |
none | 1 | 12 | 1 | 1 | 18 | 1 |
注釈 1件
実装メモ
- 「about:config」のユーザー設定「browser.display.use_document_colors」が「false」に設定されている場合、背景画像は表示されません。
基本構文
CSS
.hero {
background-image:
linear-gradient(to bottom, transparent, #000),
url('hero-bg.jpg');
}ライブデモ
実務での使いどころ
-
複数背景レイヤーの活用
グラデーションオーバーレイと写真を組み合わせて、テキストの可読性を確保しながら写真を表示するヒーローセクションを作成できます。
注意点
- 背景画像は装飾目的のみに使用してください。意味のある画像はHTMLの img 要素を使い、alt 属性で説明を提供してください。
アクセシビリティ
- background-image で表示した画像にはalt属性を設定できません。情報を伝える画像にはimg要素を使用し、適切な代替テキストを提供してください。