background-position
background-position は CSS のプロパティで、それぞれの背景画像の初期位置を設定します。位置は background-origin で設定された位置レイヤーからの相対です。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 1 | 12 | 1 | 1 | 18 | 1 | |
| その他 | ||||||
| background-position-x は CSS のプロパティで、各背景画像における水平の初期位置を設定します。位置は background-origin によって設定された位置レイヤーに対する相対位置です。 | 1 | 12 | 49 | 1 | 18 | 1 |
| CSS プロパティ | ||||||
side-relative values 側面相対値 (「左 10%」など) | 144 | 144 | 49 | 15.4 | 144 | 15.4 |
| その他 | ||||||
| background-position-y は CSS のプロパティで、各背景画像における垂直の初期位置を設定します。位置は background-origin によって設定された位置レイヤーに対する相対位置です。 | 1 | 12 | 49 | 1 | 18 | 1 |
| CSS プロパティ | ||||||
side-relative values サイド相対値 (「下位 10%」など) | 144 | 144 | 49 | 15.4 | 144 | 15.4 |
bottom | 1 | 79 | 1 | 1 | 18 | 1 |
center | 1 | 79 | 1 | 1 | 18 | 1 |
left | 1 | 79 | 1 | 1 | 18 | 1 |
multiple backgrounds 複数の背景 | 1 | 12 | 3.6 | 1.3 | 18 | 1 |
right | 1 | 79 | 1 | 1 | 18 | 1 |
side-relative values 側面相対値 (「下 10% 右 20%」など) | 25 | 12 | 13 | 7 | 25 | 7 |
top | 1 | 79 | 1 | 1 | 18 | 1 |
注釈 1件
削除済み
- このバージョンで機能が削除されました (79)
注釈 1件
削除済み
- このバージョンで機能が削除されました (79)
基本構文
CSS
.hero {
background-position: center top;
}
.sprite {
background-position: -32px -64px;
}ライブデモ
実務での使いどころ
-
背景画像のフォーカルポイント制御
ヒーロー画像やカードの背景画像で、最も重要な部分が常に表示されるよう位置を調整できます。
注意点
- パーセンテージ指定は要素のサイズと画像のサイズの両方に依存するため、直感的でない動きをすることがあります。正確な位置指定にはピクセル値の使用を検討してください。
アクセシビリティ
- 背景画像の位置によってテキストの可読性が変わる場合があります。重要なテキストの背後に適切なコントラストが確保されているか確認してください。