CSS

このページでできるようになること

• background-position の「何をどこに合わせる指定か」を、言葉で説明できる
• キーワード（left/center/right・top/bottom）と %/px の違いが分かる
• background-size（特に cover/contain）と組み合わせた“実務の定番”が作れる
• 「効かない」「思った位置にならない」原因を切り分けて直せる
• デザインシステム視点で、再利用しやすい値・制約・運用ルールを作れる

まずは直感：background-position って何？

直感的には、背景を“どこに寄せるか”です。要素（箱）の中に背景（絵）を置くとき、真ん中に置くのか、左上に寄せるのか、少し右にずらすのかを決めます。

「要素の中で、背景の基準点をどこに置くか」

background-position は、背景の位置を“座標”のように指定できます。 ただし、指定しているのは「背景そのものの絶対座標」ではなく、要素の背景を描画する領域に対する相対的な置き方です。

いちばんよく使うのは center

迷ったら center（中央）から始めると、画像の重要部分が見えやすいことが多いです。 そのうえで、重要物（顔・ロゴ・商品）を狙って少しずつ調整します。

覚え方：background-size が「背景の大きさ」、background-position が「背景の置き場所」です。

正確な定義（仕様に沿った説明）

background-position は、背景画像（またはグラデーション）を、要素の背景配置領域の中でどこに配置するかを指定します。

位置指定は “X（横）” と “Y（縦）” の2軸

たとえば 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%（右上）など。 画面サイズに応じて自然に追従しやすいので、写真背景と相性が良いです。

/* 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 の効き方を確認できます。

<div class="hero"></div>

.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 は背景なので、対象が違います。

1値だけ書くとどうなる？

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;
}

CSSスプライト（1枚にアイコンがまとまっている）

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-repeat

位置の確認・制御をしたいときは no-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）を整えると、調整のコストが下がります。

アクセシビリティ／UX観点での注意（必要な範囲で）

背景に文字や重要情報を置かない（原則）

背景は、端末サイズやズーム、配色、トリミングで見え方が変わりやすいです。 文字・重要な説明・操作に必要な情報は、基本は通常の要素として配置する方が安全です。

コントラスト確保（読みやすさ）

背景写真の上に文字を載せる場合、位置ズレで文字が明るい場所に乗って読めなくなることがあります。 位置を詰めるだけでなく、background-color の併用、半透明のオーバーレイ、文字の背景（background）なども検討します。

動く/固定背景は疲れやすいことがある

background-attachment: fixed のような表現は、酔いやすい人・端末性能が弱い環境で負担になる場合があります。 過剰に使わず、必要なら prefers-reduced-motion を意識した設計にします。

デザインシステム視点

ここからは「使える」だけでなく、再利用・制約・設計・運用に繋げる見方です。background-position は自由度が高いので、放置すると“各所でバラバラ”になりやすい領域です。

再利用しやすい値の考え方

まずは「語彙」を少なくする

いきなり自由入力を許すより、まずは定番の少数セット（例：center、center top、right bottom）で回せるかを検討します。 “90%はこれで足りる” を目指すと運用が安定します。

「端＋余白」の型を標準化する

right 12px bottom 12px のような指定は、UIのバッジ・装飾の配置で強いです。 余白の値をデザインシステムのスペース（余白スケール）と揃えると、統一感が出ます。

“焦点（フォーカス）” はトークン化しやすい

写真背景の「重要な部分（顔・商品）」をどこに寄せるかは、コンポーネントごとにパターンが出ます。 これをトークンにすると、後から一括調整しやすくなります。

CSS変数（tokens）として切り出す例

: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);
}

ポイントは「自由入力を減らす」ことです。トークンに落とすと、レビューもしやすくなります（“何を意図した位置か” が言語化される）。

utility / component / data属性にする場合の設計観点

utility（例：.bg-center）

使い回しは効きますが、増やしすぎるとクラスが雪だるま式に増えます。 まずは少数（3〜6個）に絞り、「増やす条件」を決めてから追加します。

component（例：.hero 内部で固定）

一番安定します。背景の位置をコンポーネントの責務に閉じ込めると、レイアウト変更時の事故が減ります。 “背景が意味を持つ” 場所ほど、コンポーネント側で固定する価値が高いです。

data属性（例：data-bg-focus）

CMSやテンプレートで、編集者が焦点を選べるようにする場合に向きます。 ただし自由入力を許すと壊れやすいので、値は列挙（例：center/top/bottom）に絞り、CSS側でマッピングする設計が安全です。

自由度を上げすぎた場合に起きる運用崩壊

症状：背景位置がページごとにバラバラ

原因：都度調整（37% 22% など）が増えて、意図が共有できなくなる。
対策：「使って良い値」を少数に制約し、例外が出たら “トークン追加の議論” に回す。

症状：レスポンシブで破綻する

原因：cover のトリミングが、画面比率で大きく変わるのに、位置が固定されている。
対策：ブレークポイントごとに「焦点トークン」を変える設計にする（例：SPは 50% 20%、PCは 50% 35%）。

結論（設計）：background-position は自由に見えるほど、運用では制約が必要です。少数の語彙・トークン化・例外ルール、の3点セットで “作ったあと” が楽になります。

よくある質問（FAQ）

background-position: center; は縦方向も中央ですか？

はい。1値指定の場合、縦方向は 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 を上寄せ/左右寄せで調整。それでも厳しければ背景ではなく通常要素で扱うことも検討します。

複数背景で “どれを動かしているか” 分からない

対処：一度背景を1枚に減らして切り分け、各層にコメントを付けて順番を固定します。

padding を増やしたら位置がズレた

対処：基準領域の違いを疑い、background-origin を明示して揃えます。

まとめ：迷ったときの判断軸

• 写真背景なら、まず background-size: cover ＋ background-position: center から始める
• 重要部分が切れるなら、center から少しずつ % で寄せる（例：50% 25%）
• 位置が安定しないなら、「端＋余白」指定（例：right 12px bottom 12px）を検討する
• 位置の差が見えないなら、まず background-repeat: no-repeat と background-size を整える
• 自由に調整し始めたら要注意：少数の語彙・トークン化・例外ルールで運用を守る