background-position

要素の背景画像を、決めた領域のどの位置に合わせるかを指定するプロパティ。横と縦の割合を動かし、同じ風景の見える部分を比べます。

CSSの`background-position`とは？

固定した表示領域の中で背景画像の横・縦位置をライブプレビューで動かしながら、初期値、キーワード、割合指定を初学者向けに解説します。

遊んでみよう

背景画像は350px × 260px・表示枠は260px × 200px

横 0%・縦 0%

CSS

.element background-position: 0% 0%;

値のパターン

横の位置 1つ目の値0%

縦の位置 2つ目の値0%

background-positionの構成要素

010%

横方向の位置

1つ目の値です。0%は左、50%は中央、100%は右へ背景画像を合わせます。

020%

縦方向の位置

2つ目の値です。0%は上、50%は中央、100%は下へ背景画像を合わせます。

03right 20px bottom 16px

辺からの距離

右から20px、下から16pxのように、基準にする辺と距離を組み合わせる書き方もできます。

早見表

初期値は0% 0%で左上です。キーワードでも割合でも、背景画像の横方向と縦方向の位置を表せます。

010% 0%左上初期値

0250% 50%中央center

03100% 0%右上right top

0450% 100%中央下center bottom

0520px 40px左上から長さで配置長さ

06right 20px bottom 16px右下から距離を空ける辺 + 長さ

よくある使い方

ヒーロー背景の主役を中央に残す

coverで画像の端が切れる領域では、注目させたい部分が見える位置へ背景画像を合わせます。

.hero { background-size: cover; background-position: center; }

装飾画像を右下へ置く

繰り返さない小さな背景画像を右下へ合わせると、本文を避けた装飾として配置できます。

.notice { background-repeat: no-repeat; background-position: right bottom; }

スプライト画像の表示範囲をずらす

固定した小さな箱の背景位置へ負の長さを指定し、大きな画像の必要な部分だけを見せます。

.icon { background-position: -48px -24px; }

ポイント

割合は、画像そのものの端ではなく余った距離で決まる。

background-positionは背景画像の大きさを変えず、背景配置領域の中で位置だけを動かします。初期値は0% 0%、すべての要素と::first-letter・::first-lineに適用でき、子要素へは継承されません。割合は背景配置領域の寸法から背景画像の寸法を引いた距離を基準に計算されるため、50% 50%で画像の中心と領域の中心が揃います。先にbackground-imageを用意し、大きさはbackground-size、繰り返しはbackground-repeatで調整します。複数の背景画像にはカンマ区切りで画像ごとの位置を指定できます。