背景位置プロパティ

最終更新：2026-09-13

background-position 背景位置プロパティ

background-position は要素内での背景画像の開始位置を設定し、既定は左上隅（0% 0%）です。キーワード（left、center、right、top、bottom）、長さの値、パーセントを受け付けます。通常は background-image と組み合わせて背景を正確に配置します。

カテゴリ
初期値	0% 0%
継承	いいえ
適用対象	all
アニメーションタイプ	length
CSS バージョン	CSS1
状態	標準

📝 構文

background-position: <position>{1,4};

⚙️ 値

値	タイプ	説明
`left \| center \| right \| top \| bottom`	キーワード	定義済みの位置キーワード
`<length> \| <percentage>`	タイプ	明示的な位置の値

▶ 例

以下のコードを編集して、プレイグラウンドでライブ結果を確認してください：

▶ 試す

🌐 ブラウザーサポート

ブラウザー	Chrome	Edge	Firefox	Safari	Opera
background-position	✓ v1	✓ v12	✓ v1	✓ v1	✓ v1
すべての主要ブラウザーでサポート

ヒント： パーセントでは、background-position: 100% 100% は right bottom と同等です。

ヒント： 負の値を使うと背景画像を要素の外に配置でき、CSS スプライトでよく使われる手法です。

❓ よくある質問

Q背景画像を中央に配置するにはどうすればよいですか？

Abackground-position: center; または background-position: 50% 50%; を使用します。どちらもコンテナ内で水平垂直方向に画像を中央揃えします（center キーワードは 50% 50% と同等）。画像が並ばないよう background-repeat: no-repeat と組み合わせてください。

Qbackground-position の 1 つの値と 2 つの値の違いは何ですか？

A1 つの値の場合、指定されていない方向は center が既定となるため、background-position: left は left center と同等です。2 つの値の場合、1 つ目が水平軸、2 つ目が垂直軸を設定します（例: center top）。オフセット記法もサポートされており、right 20px bottom 10px のように右下隅に対する相対位置になります。

Qパーセントでの配置とピクセルでの配置の違いは何ですか？

Aパーセントでは、画像の対応する点がコンテナの対応する点と揃います。50% 50% は画像の中心とコンテナの中心を一致させます。ピクセルでは、画像の左上隅がコンテナの左上隅から固定量だけオフセットします。画像を右に寄せるには 100% または right 0 を、正確な間隔には right 10px のようなオフセット記法を使用します。

QCSS スプライトに background-position をどう使えばよいですか？

Aスプライトは複数のアイコンを 1 枚の画像にまとめ、必要な部分を表示するために負の background-position でずらします。32px のアイコンの場合、2 番目は background-position: -32px 0 です。background-size で拡縮する場合は、オフセットもそれに合わせて換算してください。この手法はアイコンフォントやインライン SVG に徐々に置き換わっています。