# background-position

> 背景画像の配置位置を制御するプロパティです。キーワード（top、center、bottom、left、right）や数値、パーセントで位置を指定できます。複数の背景画像それぞれに異なる位置を設定することも可能です。

- カテゴリ: 背景・装飾
- URL: https://www.css-dictionary.com/property/background-position/

## 構文

```css
background-position: <position> | <length> | <percentage>
```

## Tailwindでは

- `bg-center` → background-position: center
- `bg-top` → background-position: top
- `bg-left` → background-position: left
- 任意値: `bg-[position:20%_80%]`

## ブラウザ対応

- Baseline 広く利用可能
- Chrome 1+ / Firefox 1+ / Safari 1+ / Edge 12+

## コード例

### 例1: 背景画像を中央に配置

```css
background-position: center;
```

### 例2: 背景画像を右上に配置

```css
background-position: top right;
```

### 例3: 水平方向20%、垂直方向80%の位置に配置

```css
background-position: 20% 80%;
```

### 例4: 左から50px、上から100pxの位置に配置

```css
background-position: 50px 100px;
```

## TIPS

ヒーロー画像の重要な部分を調整したり、パターン画像の位置を微調整するのに便利。centerは最も使用頻度が高い。

## よくある間違い

パーセント指定は画像とコンテナの対応する位置を揃える仕組みなので、50% 50%が中央配置になる。

## AIがよく間違えるポイント

%指定の意味が特殊で、「画像の50%地点を要素の50%地点に合わせる」という基準点同士の対応です（pxのような単純オフセットではない）。この仕様はAIも誤って説明しがちです。人物写真の顔位置合わせなどはパーセンテージ基準の方が破綻しにくい、という実務知識も添えると良いコードが出ます。

## AIへの依頼文例

- レスポンシブで背景写真の顔が見切れないよう、background-positionをパーセンテージ基準で調整して

## 関連プロパティ

- [background-image](https://www.css-dictionary.com/property/background-image.md)
- [background-size](https://www.css-dictionary.com/property/background-size.md)