The CSS background-position property sets where a background image (or gradient) is placed inside an element. You can use keywords like left/center/right and top/bottom, or use lengths and percentages for precise control.
background-position は、背景（background-image）の置き場所を決めるプロパティです。言い換えると「背景のどの部分を、要素のどこに合わせるか」を指定します。
写真を背景にするとき、「顔が切れる」「ロゴが見えない」「重要な部分がズレる」などの困りごとは、まず background-position と background-size の組み合わせで解決できることが多いです。
background-position の「何をどこに合わせる指定か」を、言葉で説明できるleft/center/right・top/bottom）と %/px の違いが分かるbackground-size（特に cover/contain）と組み合わせた“実務の定番”が作れるbackground-position って何？直感的には、背景を“どこに寄せるか”です。要素（箱）の中に背景（絵）を置くとき、真ん中に置くのか、左上に寄せるのか、少し右にずらすのかを決めます。
background-position は、背景の位置を“座標”のように指定できます。
ただし、指定しているのは「背景そのものの絶対座標」ではなく、要素の背景を描画する領域に対する相対的な置き方です。
centercenter（中央）から始めると、画像の重要部分が見えやすいことが多いです。
そのうえで、重要物（顔・ロゴ・商品）を狙って少しずつ調整します。
覚え方：background-size が「背景の大きさ」、background-position が「背景の置き場所」です。
background-position は、背景画像（またはグラデーション）を、要素の背景配置領域の中でどこに配置するかを指定します。
left top は「左上」、center は「中央」。
20px 10px は「左から20px、上から10px」です。
%）は「端と端を合わせる割合」0% 0% は左上、50% 50% は中央、100% 100% は右下。
ここでの % は、背景画像のサイズと背景配置領域の差分に対する割合として扱われます。
つまり「画像が領域より大きい/小さい」でズレ方が変わり得ます（後述の落とし穴で扱います）。
background-origin で変わるbackground-origin（既定は padding-box）の影響を受けます。
ふだんは意識しなくて良いですが、borderやpaddingが大きいレイアウトで「なんかズレる」時はここが原因のことがあります。
厳密さはここまで覚えればOKです。使うときは「X（横）とY（縦）で、背景を寄せる/ずらす」と捉えるのが一番ラクです。
まずは “これだけ” の型
left/center/right（横）と、top/center/bottom（縦）を組み合わせます。
pxなど）20px 10px のように「左から20px・上から10px」のようにズラします。
ピクセルに強いUI（アイコン・スプライト・ピクセルアート）でよく使います。
%）50% 50%（中央）や 100% 0%（右上）など。
画面サイズに応じて自然に追従しやすいので、写真背景と相性が良いです。
CSS
/* 1値：横だけ指定 → 縦は center 扱い（よく使う） */
.hero {
background-position: center;
}
/* 2値：横 縦（キーワード） */
.heroTop {
background-position: center top;
}
/* 2値：横 縦（%） */
.heroFocus {
background-position: 50% 30%;
}
/* 2値：横 縦（長さ） */
.iconSprite {
background-position: -64px -128px;
}ここで止まりがち：background-position だけ書いても、background-image が無ければ何も起きません。まず background-image が設定されているかを確認します。
このデモは画像ファイルを使わず、グラデーションで「目印（赤・緑・青の丸）」を作っています。丸が “どこに寄るか” で background-position の効き方を確認できます。
現在の値：center
ヒント：right 16px bottom 12px のように「端から何px離す」を書けるのが実務で便利です（後で詳しく説明します）。
HTML
<div class="hero"></div>CSS
.hero {
height: 260px;
background-image: url("photo.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}実務メモ：写真を背景にするなら、まず background-size: cover と background-position: center をセットにするのが定番です。そこから「見せたい部分」を狙って位置を調整します。
background-position は「背景画像の中身」を動かしている？text-align や object-position と混同しがちtext-align は文字の整列、object-position は <img> など置き換え要素の中身の位置。
background-position は背景なので、対象が違います。
background-position: center; のように1つだけ書いた場合、横方向が指定され、縦方向は center 扱いになります。
つまり center は center center と同じ意味で使える、ということです。
% は「要素の左上からの割合」だと思っていたbackground-size が変わると「同じ 50% 30% でも見え方が変わる」ことがあります。
background-repeat が repeat のままだと、「どのタイルが基準なのか」が見えづらくなります。
位置を確認したいときは一度 no-repeat にして確認すると切り分けが早いです。
cover でトリミングが起きる前提で、被写体が切れにくい位置に寄せます。
例：人物の顔を上寄せにするなら 50% 25% など。
CSS
.hero {
background-image: url("hero.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: 50% 25%;
}CSS
.badge {
background-image: url("badge.svg");
background-repeat: no-repeat;
background-position: right 12px bottom 12px;
}background-position を負の値にして、必要な部分だけを見せます。
CSS
.iconMail {
width: 24px;
height: 24px;
background-image: url("sprite.png");
background-repeat: no-repeat;
background-position: -48px -72px;
}スプライトは今は以前ほど多くないですが、管理しやすい環境（ゲームUI・社内ツールなど）ではまだ現役です。
background-position を対応させると、「柄は繰り返し」「ロゴは右下固定」のような設計ができます。
CSS
.card {
background-image:
url("logo.svg"),
linear-gradient(45deg, rgba(0,0,0,0.06) 0 12px, rgba(0,0,0,0) 12px 24px);
background-repeat: no-repeat, repeat;
background-size: 96px 96px, 24px 24px;
background-position: right 12px bottom 12px, left top;
}cover で重要な部分が切れるbackground-size: cover は「箱を埋めるためにトリミング（切り取り）が起きる」動きです。
background-position で“切れて困る部分”を中央からズラして守ります。
それでも守れない場合は、contain や、背景ではなく <img>＋object-fit の方が適しているケースがあります。
% 指定が端末サイズでズレる% は「差分に対する割合」なので、画像と箱のサイズ差が変わると見え方も変化します。
right 12px bottom 12px のように端からの余白指定に切り替えると安定します。
あるいは、ブレークポイントごとに background-position を調整します。
background-repeat: repeat のまま（繰り返しで差が見えにくい）background-size が auto のままで、画像が小さく、どこに置いても同じに見えるbackground-position はカンマ対応）no-repeat にして、background-size を明示し、対象の層を1枚に絞って確認します。
padding や border を足したら “位置がズレた”padding-box）が変わったり、期待と違って見えることがあります。
background-origin を明示し、どの領域を基準にしているかを揃えます（後述）。
落とし穴：「背景＝装飾」だから雑にして良い、と思うと事故りやすいです。背景に情報（ロゴ・文字）を入れるほど、位置ズレがUX事故につながります。迷ったら背景ではなく通常の要素として配置する判断も大切です。
background-size（特に cover/contain）background-position は「置き場所」ですが、background-size が変わると “見える範囲” が変わります。
実務では、この2つはセットで考えます。
CSS
.thumbCover {
background-size: cover;
background-position: center;
}
.thumbContain {
background-size: contain;
background-position: center;
background-repeat: no-repeat; /* contain は余白が出やすいので repeat を止める */
}background-repeatno-repeat が基本です。
パターン背景で繰り返すときは、background-position は「タイルの開始位置」をずらす用途になります。
background-origin（位置計算の基準領域）padding-box（padding を含む領域）です。
たとえば枠線の外側から計算したい/内側から計算したい、のような制御ができます。
CSS
.originPadding {
background-origin: padding-box; /* 既定 */
}
.originBorder {
background-origin: border-box; /* border まで含めて位置を計算 */
}
.originContent {
background-origin: content-box; /* content のみを基準（padding を含めない） */
}background-clip（背景を塗る範囲）background-origin）と、実際に塗る範囲（background-clip）は別物です。
「位置は合っているのに見えない」場合は、clip で切れていることがあります。
background-image をカンマで複数）background-position もカンマ区切りで対応します。
層の数がズレると「どれがどれだっけ？」が起きるので、実務では順番を固定し、コメントで意図を残すと保守が楽です。
background-attachment（固定背景）fixed は見た目が派手ですが、モバイルでは挙動やパフォーマンスが絡むことがあります。
“位置が合わない” のではなく “描画ルールが違う” だけのこともあるので、まずは scroll（既定）に戻して切り分けます。
コツ：「位置が悪い」の前に、サイズ（background-size）と繰り返し（background-repeat）を整えると、調整のコストが下がります。
background-color の併用、半透明のオーバーレイ、文字の背景（background）なども検討します。
background-attachment: fixed のような表現は、酔いやすい人・端末性能が弱い環境で負担になる場合があります。
過剰に使わず、必要なら prefers-reduced-motion を意識した設計にします。
ここからは「使える」だけでなく、再利用・制約・設計・運用に繋げる見方です。background-position は自由度が高いので、放置すると“各所でバラバラ”になりやすい領域です。
center、center top、right bottom）で回せるかを検討します。
“90%はこれで足りる” を目指すと運用が安定します。
right 12px bottom 12px のような指定は、UIのバッジ・装飾の配置で強いです。
余白の値をデザインシステムのスペース（余白スケール）と揃えると、統一感が出ます。
CSS
:root {
--bg-pos-center: center;
--bg-pos-top: center top;
--bg-pos-bottom: center bottom;
--bg-pos-corner: right 12px bottom 12px; /* 端＋余白（スペーススケールに合わせる） */
--bg-focus-face: 50% 25%; /* “焦点”トークン（例） */
}
.hero {
background-position: var(--bg-pos-center);
}
.heroFace {
background-position: var(--bg-focus-face);
}ポイントは「自由入力を減らす」ことです。トークンに落とすと、レビューもしやすくなります（“何を意図した位置か” が言語化される）。
.bg-center）.hero 内部で固定）data-bg-focus）center/top/bottom）に絞り、CSS側でマッピングする設計が安全です。
37% 22% など）が増えて、意図が共有できなくなる。
cover のトリミングが、画面比率で大きく変わるのに、位置が固定されている。
50% 20%、PCは 50% 35%）。
結論（設計）：background-position は自由に見えるほど、運用では制約が必要です。少数の語彙・トークン化・例外ルール、の3点セットで “作ったあと” が楽になります。
background-position: center; は縦方向も中央ですか？center 扱いになるため、center は center center と同じ意味で使えます。
% と px はどちらを使えばいいですか？% が便利です。
一方で「右下から12px内側」のように端からの余白を安定させたい場合は、right 12px bottom 12px のような “端＋長さ” が強いです。
background-position が効かないのですが？background-image が設定されているか、background-repeat が repeat のままになっていないか、
そして background-size が意図通りか（小さすぎて差が見えない、など）を順に確認すると原因を絞れます。
right 10px bottom 10px のような書き方は常に使えますか？background-origin を変更している場合は、どの領域の端から計算しているかを意識してください。
background-size: cover だとトリミングが起きるため、中央にしても「重要部分が中央に残る」とは限りません。
“見せたい部分がどこか” を決めて、50% 25% のように少し上寄せ/左寄せで調整していくのが基本です。
background-image と同じ順番で、background-position もカンマ区切りで対応させます。
例：background-position: right bottom, left top; のように書きます。
background-repeat: no-repeat; にし、background-size を明示して差が出る状態にします。% 指定が端末でズレるright 12px bottom 12px）や、ブレークポイント別指定を検討します。cover で顔やロゴが切れるbackground-position を上寄せ/左右寄せで調整。それでも厳しければ背景ではなく通常要素で扱うことも検討します。padding を増やしたら位置がズレたbackground-origin を明示して揃えます。background-size: cover ＋ background-position: center から始めるcenter から少しずつ % で寄せる（例：50% 25%）right 12px bottom 12px）を検討するbackground-repeat: no-repeat と background-size を整える