タイトル: background-positionプロパティ
SEOタイトル: CSS background-position 完全ガイド（キーワード / %, px / 4値構文 / background-origin との連携）
| この記事の要点 |
|
background-position とは
background-position プロパティは、background-image で指定した背景画像の表示開始位置を指定するプロパティです。既定値は 0% 0%（左上）で、画像は要素の左上角を起点として描画されます。
基本構文
.box {
background-image: url("/img/star.png");
background-repeat: no-repeat;
background-position: center center; /* 中央に表示 */
}値の種類
| 値 | 意味 | 例 |
|---|---|---|
| キーワード | left / center / right と top / center / bottom の組み合わせ | right bottom |
| 長さ（px / em / rem 等） | 左上角からのオフセット | 20px 40px |
| パーセンテージ | 画像のその％点が表示領域のその％点に揃う | 50% 50%（中央） |
| 4 値構文 | 「基準辺 + オフセット」を 2 軸ぶん | right 20px bottom 30px |
1 つだけ書いた場合、もう一方は center とみなされます（background-position: top; = top center）。
キーワード指定
.a { background-position: left top; } /* 左上（既定） */
.b { background-position: center; } /* 中央 */
.c { background-position: right bottom; } /* 右下 */
.d { background-position: center top; } /* 上中央 */キーワードは順不同で、top right と right top はどちらも有効です。
パーセント指定の独特な挙動
パーセント値は「画像のその％点」が「表示領域のその％点」に揃うという意味になります。たとえば 50% 50% は「画像の中心が表示領域の中心に揃う」ので中央配置になります。100% 100% は「画像の右下角が表示領域の右下角に揃う」=右下配置です。
| 値 | 結果 |
|---|---|
0% 0% | 左上（left top と同義） |
50% 50% | 中央（center と同義） |
100% 100% | 右下（right bottom と同義） |
長さ指定（px / em など）
.box {
background-image: url("/img/icon.png");
background-repeat: no-repeat;
background-position: 20px 10px; /* 左から20px、上から10px */
}負の値も指定できます。background-position: -50px 0; は「画像の左 50px ぶんを表示領域の外（左側）に追い出す」— スプライト画像から特定の絵柄だけ切り出して見せる古典的なテクニックです。
4 値構文（CSS3）
CSS3 で追加された 4 値構文では、「どの辺から何px」という指定が可能になりました。右端や下端からのオフセットを直感的に書けます。
/* 右端から 20px、下端から 30px の位置に右下角が来る */
.box { background-position: right 20px bottom 30px; }
/* 左端から 10px、上端から 15px */
.box { background-position: left 10px top 15px; }関連プロパティとの組み合わせ
| プロパティ | 役割 |
|---|---|
background-image | 背景画像の URL を指定 |
background-repeat | 繰り返しの有無（no-repeat / repeat-x 等） |
background-size | 表示サイズ（contain / cover / 寸法指定） |
background-origin | 位置指定の原点（padding-box / border-box / content-box） |
background-attachment | スクロール追従 / 固定 |
ショートハンド background での書き方
/* background ショートハンドの中で position / size を組み合わせる */
.hero {
/* position と size は "/" で区切る */
background: url("/img/hero.jpg") center center / cover no-repeat;
}レスポンシブの定番パターン
.hero {
background-image: url("/img/hero.jpg");
background-size: cover; /* 領域いっぱいに引き伸ばし */
background-position: center; /* 中央を起点にトリミング */
background-repeat: no-repeat;
min-height: 400px;
}背景にヒーロー画像を敷くときは、background-size: cover + background-position: center が定番。画面サイズが変わってもメインの被写体を中央に保ったままトリミングできます。
スプライト画像で位置調整
1 枚の画像に複数のアイコンを並べた「CSS スプライト」では、background-position を負の値で指定して必要な絵柄だけを表示窓に映します。
.icon {
width: 32px;
height: 32px;
background-image: url("/img/sprite.png");
background-repeat: no-repeat;
}
.icon-home { background-position: 0 0; }
.icon-mail { background-position: -32px 0; } /* 右に32pxずらした位置の絵 */
.icon-user { background-position: -64px 0; }
.icon-gear { background-position: -96px 0; }アニメーション
/* 背景を左右にゆっくり動かす */
@keyframes bgMove {
from { background-position: 0 0; }
to { background-position: 100% 0; }
}
.banner {
background: url("/img/pattern.png") repeat-x;
animation: bgMove 10s linear infinite;
}FAQ
Q: 値は 1 つだけ書ける？
A: 書けます。残りは center とみなされます。background-position: top; は top center と同義です。
Q: % と px は混ぜられる？
A: 可能です。background-position: 50% 20px; のように。
Q: 動かしてアニメーションさせたい
A: transition や @keyframes で background-position を補間できます。スプライトアニメーションの定番手法です。
Q: 個別プロパティ background-position-x / -y は使える？
A: モダンブラウザでは使えますが、仕様としては安定が遅かったため、互換性重視ならまとめて background-position を書くほうが無難です。