ブログ

なぜbackground-positionが100%なのに背景画像が左に配置されるのか？

2026.01.16

突然ですが、以下のコードでは背景画像は要素に対して左右どちらに配置されると思いますか？

1
.background {
2
  background-size: 150% 100%;
3
  background-position: 300% 0%;
4
}

background-positionが300%のため、直感的には右側に配置されそうですが、正解は左側です。

以下のデモで「background-positionを0 0にする」ボタンを押すと、背景画像が右へ移動する様子が確認できます。

これは間違いではなく、background-positionの仕様通りの動作です。300% という大きな値を指定しているのに、なぜ左側に配置されるのでしょうか？その答えは、% 指定の計算方法にあります。

この記事では、少しクセのあるbackground-positionの%指定の仕組みを固定値（px）との比較を交えながら解説しています。

background-positionが固定値（px）の場合

固定値の場合はとても単純です。

以下のデモではbackground-position: 50px 20pxを指定しています。要素の左上を頂点にx軸 50px、y軸 20px移動した場所に画像の左上が位置しています。

固定値の場合、background-sizeの値はbackground-positionに影響しません。

例えば以下のデモではbackground-size: 150% 100%;として背景画像を拡大していますが、配置位置は変わらず、画像のサイズのみが大きくなっています。

このようにbackground-positionが固定値の場合は、視覚的なイメージと一致するため混乱することは少ないでしょう。

では次に、% 指定の場合を見ていきます。

ここからが本題です。% 指定の場合、位置は以下の計算式で決まります。

1
背景位置（x） = (要素の幅 - 背景画像の幅) × パーセント値

この式はMDNのbackground-position のパーセント値についてに記載されています。高さ方向（Y軸）も同様に計算されます。

この計算式の特徴は、「要素の幅 - 背景画像の幅」という差分を基準にしている点です。

そのため：

これが冒頭で「300%なのに左に配置される」理由です。

では、具体例で確認していきます。

以下のデモではbackground-size: 80% 100%;、background-position: 100% 20px;を指定しています。

計算式に当てはめてみます。

1
背景位置 = (200px - 160px) × 100% = 40px × 1 = 40px

つまりbackground-position-x: 40px;を指定しているのと同じです。

これがbackground-position: 100%;を指定すると背景画像が右端に配置される理由です。差分の40px分だけ右に移動することで、背景画像の右端が要素の右端に吸着します。

以下のデモではbackground-size: 150% 100%;、background-position: 100% 20px;を指定しています。

計算式に当てはめてみます。

1
背景位置 = (200px - 300px) × 100% = -100px × 1 = -100px

つまりbackground-position-x: -100px;を指定しているのと同じです。

「background-position を 0% 0% にする」ボタンを押すと、背景画像が左から右へ移動する様子が確認できます。これは、初期位置がマイナス（左側）にあることを示しています。

ケース	差分	100% 指定時の動作
画像 < 要素	プラス	右に移動（正の値）
画像 > 要素	マイナス	左に移動（負の値）

このように、background-position の % 指定は単純に「右方向への移動量」を表すのではなく、 「要素と背景画像の差分（余白）をどう配分するか」 を表しています。

そのため、背景画像が要素より大きい場合は差分がマイナスになり、 100% や 300% といった正の値を指定しても、計算結果はマイナス（左方向への配置）になるのです。

これが冒頭の謎の答えでした。background-positionの % 指定の仕組みを理解すると、一見不可解に見える挙動も納得できるようになります。

ちなみに、この計算方法は background-position だけでなく、mask-position でも同様です。mask-positionのアニメーションがうまくいかないときは、この計算式を思い出してみると良いかもしれません。