background-size
background-size は CSS のプロパティで、要素の背景画像の寸法を設定します。 画像は自然な寸法になったり、引き伸ばされたり、利用可能な領域に収まるように縮小されたりします。
背景画像に覆われていない領域は background-color プロパティで埋められ、透過性のある背景画像の背後には背景色が見えます。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 3 | 12 | 4 | 5 | 18 | 4.2 | |
auto | 1 | 12 | 3.6 | 3 | 18 | 2 |
contain | 3 | 12 | 3.6 | 5 | 18 | 4.2 |
cover | 3 | 12 | 3.6 | 5 | 18 | 4.2 |
background-size 'background-size' 手書きの値 | 21 | 12 | 9 | 5.1 | 25 | 4 |
注釈 2件
対応条件
- ベンダープレフィックス付きで対応: -webkit- (1)
実装メモ
- WebKit ベースのブラウザは元々、CSS3 の「background-size」の古いドラフトを実装していました。このドラフトでは、省略された 2 番目の値は最初の値の重複として扱われます。 このドラフトには「contain」または「cover」キーワードが含まれていません。
注釈 1件
対応条件
- ベンダープレフィックス付きで対応: -webkit- (12)
注釈 3件
対応条件
- ベンダープレフィックス付きで対応: -webkit- (49)
- ベンダープレフィックス付きで対応: -moz- (3.6)
削除済み
- このバージョンで機能が削除されました (4)
注釈 2件
対応条件
- ベンダープレフィックス付きで対応: -webkit- (3)
実装メモ
- WebKit ベースのブラウザは元々、CSS3 の「background-size」の古いドラフトを実装していました。このドラフトでは、省略された 2 番目の値は最初の値の重複として扱われます。 このドラフトには「contain」または「cover」キーワードが含まれていません。
注釈 2件
対応条件
- ベンダープレフィックス付きで対応: -webkit- (18)
実装メモ
- WebKit ベースのブラウザは元々、CSS3 の「background-size」の古いドラフトを実装していました。このドラフトでは、省略された 2 番目の値は最初の値の重複として扱われます。 このドラフトには「contain」または「cover」キーワードが含まれていません。
注釈 2件
対応条件
- ベンダープレフィックス付きで対応: -webkit- (1)
実装メモ
- WebKit ベースのブラウザは元々、CSS3 の「background-size」の古いドラフトを実装していました。このドラフトでは、省略された 2 番目の値は最初の値の重複として扱われます。 このドラフトには「contain」または「cover」キーワードが含まれていません。
基本構文
CSS
.hero {
background-image: url('hero.jpg');
background-size: cover;
}
.icon-bg {
background-size: 32px 32px;
}ライブデモ
実務での使いどころ
-
レスポンシブな全画面背景画像
background-size: cover を使って、どの画面サイズでも要素全体を覆う背景画像を実現できます。
注意点
- cover を使用すると画像の端が切り取られる可能性があります。重要な部分が見えなくならないよう、background-position と組み合わせて調整してください。
アクセシビリティ
- 大きな背景画像はページの読み込みパフォーマンスに影響します。適切な画像サイズと圧縮を行い、低帯域幅環境のユーザーにも配慮してください。