背景位置の詳細解説

background-positionプロパティは、背景画像の開始位置を設定するために使用されます。

背景の位置：x y；

値：

1. X：始点の水平方向位置。具体的なピクセル値（例：10px）やパーセンテージ値（例：50%）を使用できます。デフォルト値は50％です。
2. y：縦方向の開始位置。具体的なピクセル値（例：10px）やパーセンテージ値（例：50%）を使用することができます。デフォルト値は50%です。

一つの値だけが指定された場合、その値は水平方向と垂直方向の開始位置に適用されます。

背景画像の開始位置を左上に設定します。
背景画像の開始位置を中央に設定します。
背景画像の開始位置を右下に設定します。
背景画像の開始位置を水平方向の20％、垂直方向の40％に設定します。

容器に対して背景画像のオフセットを設定するために、マイナス値を使用することができます。

バックグラウンドの位置：-10ピクセル-20ピクセル; // 背景画像の開始位置を左上に10ピクセルと20ピクセルずらす

背景画像の幅や高さがコンテナーの幅や高さよりも小さい場合、背景画像はコンテナー全体を埋めるように伸ばされます。この場合、開始位置の設定が予想外の効果をもたらす可能性があります。