background-positionは、背景の「どの点」を要素の「どの点」に合わせるかを決める指定

background-positionは、背景の「どの点」を、要素の「どの点」に合わせるか、を決める指定です。

• background-position-x
• background-position-y

のショートハンドになっていて、水平方向と垂直方向の指定が可能です。デフォルトだと水平方向は左を起点に、垂直方向は上が起点になります。

background-sizeで背景のサイズを変更している場合に混乱しがちなので、改めて整理しておきましょう。

0% 0%の場合

例えば、background-position: 0% 0%;だと、

• 「背景の左0%の位置、上0%の位置」を、
• 「要素の左0%の位置、上0%の位置」に合わせる

という指定です。

この、背景の位置と要素の位置の両方を同時に指定しているのが、background-positionになります。

50% 50%の場合

background-position: 50% 50%;の場合は、

• 「背景の左50%の位置、上50%の位置」を、
• 「要素の左50%の位置、上50%の位置」に合わせる

という指定になり、結果として要素の中央に背景が配置されているような表現となります。

100% 0%の場合

もう1つ例を見ておきましょう。

background-position: 100% 0%;の場合は、

• 「背景の左100%の位置、上0%の位置」を、
• 「要素の左100%の位置、上0%の位置」に合わせる

と言う表現になります。

背景の左から100%の位置は、背景の右端です。要素の左から100%の位置も右端です。つまり右端と右端が重なるように配置されるので、右に寄った背景となります。

background-image: linear-gradient(90deg, #ccc 0%, #ccc 50%, #eee 50%, #eee 100%);
background-repeat: no-repeat;
background-size: 50% 100%;
background-position: 100% 0%;

/* レイアウト用 */
width: 200px;
height: 100px;
border: 5px dashed #D05D5D;

背景がはみ出ている時

例えば、background-size: 200% 100%と、水平方向を2倍に引き延ばした場合は、水平方向の初期の位置としては以下の通りです。

※半分の位置が分かりやすいように背景の色を変えています。

background-size: 200% 100%;
background-position-x: 0%;

background-position-x: 100%は、「背景の左端から100%の位置を要素の左端に合わせる」という指定の方法です。100%は要素の幅の100%の位置を表します。

背景は200%で要素の2倍になっているので、ここで言う100%の位置は背景を基準に言うと、グレーと白の境目の半分の位置になります。

ここが左に揃う形になるので、次の位置で表示されます。

background-size: 200% 100%;
background-position-x: 100%;

背景がはみ出ていない時

例えば、background-size: 50% 100%と、水平方向を半分に縮小した場合は、水平方向の初期の位置としては以下の通りです。

※半分の位置が分かりやすいように背景の色を変えています。（変える意味はないですが、、、先ほどの例を踏襲して）

background-size: 50% 100%;
background-position-x: 0%;

このように、背景の「どの点」を、要素の「どの点」に合わせるか、を押さえておくと、背景を使ったアニメーションを表現しやすくなりますので、イメージできるようにしておきましょう。