background-position

背景・装飾

背景画像の配置位置を制御するプロパティです。キーワードや数値、パーセントで位置を指定できます。

構文

Syntax
background-position: <position> | <length> | <percentage>

コード例

例 1

background-position: center;
実行結果
background-position: center - 背景画像を中央に配置
中央配置
💡 最も使用頻度が高い配置。ロゴやアイコンでよく使用

背景画像を中央に配置

例 2

background-position: top right;
実行結果
background-position: top right - 背景画像を右上に配置
右上
💡 バッジやアイコンを右上に配置する際によく使用

背景画像を右上に配置

例 3

background-position: 20% 80%;
実行結果
background-position: 20% 80% - パーセントでの位置指定
20% 80%
💡 水平20%、垂直80%の位置。精密な位置調整に便利

水平方向20%、垂直方向80%の位置に配置

例 4

background-position: 50px 100px;
実行結果
background-position: 50px 100px - ピクセル単位での位置指定
50px 20px
💡 左から50px、上から20px。絶対的な位置指定

左から50px、上から100pxの位置に配置

💡 TIPS

ヒーロー画像の重要な部分を調整したり、パターン画像の位置を微調整するのに便利。centerは最も使用頻度が高い。

⚠️ よくある間違い

パーセント指定は画像とコンテナの対応する位置を揃える仕組みなので、50% 50%が中央配置になる。

関連プロパティ

ブラウザサポート

全ブラウザ対応