# background-size

> 背景画像のサイズを制御するプロパティです。contain（全体を表示）、cover（領域を埋める）のほか、px、%などの具体的な値でも指定できます。レスポンシブデザインで背景画像を最適に表示するために不可欠です。

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

## 構文

```css
background-size: auto | cover | contain | <length> | <percentage>
```

## Tailwindでは

- `bg-cover` → background-size: cover
- `bg-contain` → background-size: contain
- `bg-auto` → background-size: auto
- 任意値: `bg-[length:200px_100px]`

## ブラウザ対応

- Baseline 広く利用可能
- Chrome 3+ / Firefox 4+ / Safari 5+ / Edge 12+

## コード例

### 例1: アスペクト比を保ちながら要素全体を覆う

```css
background-size: cover;
```

### 例2: アスペクト比を保ちながら要素内に収める

```css
background-size: contain;
```

### 例3: 幅100%、高さは自動調整

```css
background-size: 100% auto;
```

## TIPS

coverはヒーロー画像、containはロゴなどに適している。

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

coverとcontainの取り違えはobject-fitと同様にAIでも頻発します（cover=領域を埋めて見切れる、contain=全体表示で余白）。また%指定は「要素サイズに対する割合」で画像の縦横比を無視するため、意図せず歪んだ背景になる生成コードがあります。

## AIへの依頼文例

- ヒーローセクションの背景写真を、画面サイズが変わっても見切れ方が自然なようにbackground-sizeとpositionで調整して

## 関連プロパティ

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