background
background は CSS の一括指定プロパティで、色、画像、原点と寸法、反復方法など、背景に関するすべてのスタイルプロパティを一括で設定します。 background 一括指定プロパティの値宣言で設定されていない成分のプロパティは、既定値に設定されます。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 1 | 12 | 1 | 1 | 18 | 1 | |
local | 1 | 12 | 1 | 1 | 18 | 1 |
multiple backgrounds 複数の背景 | 1 | 12 | 3.6 | 1.3 | 18 | 1 |
no-repeat | 1 | 12 | 1 | 1 | 18 | 1 |
none | 1 | 12 | 1 | 1 | 18 | 1 |
repeat | 1 | 12 | 1 | 1 | 18 | 1 |
repeat-x | 1 | 12 | 1 | 1 | 18 | 1 |
repeat-y | 1 | 12 | 1 | 1 | 18 | 1 |
round | 1 | 12 | 1 | 1 | 18 | 1 |
scroll | 1 | 12 | 1 | 1 | 18 | 1 |
space | 1 | 12 | 1 | 1 | 18 | 1 |
transparent | 1 | 12 | 1 | 1 | 18 | 1 |
基本構文
CSS
.hero {
background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
url('hero.jpg') center/cover no-repeat;
}ライブデモ
実務での使いどころ
-
ヒーローセクションの背景設定
画像の上にグラデーションオーバーレイを重ねて、テキストの可読性を確保しながら背景画像を表示できます。
注意点
- ショートハンドで指定しなかったサブプロパティは初期値にリセットされます。既存の個別プロパティを上書きしないよう、記述順序に注意してください。
アクセシビリティ
- 背景画像上にテキストを配置する場合は、画像が読み込まれなかった場合でもテキストが読めるよう、適切な背景色をフォールバックとして設定してください。