# background-image

> 要素の背景画像を指定するプロパティです。url()で画像を指定するほか、linear-gradient()やradial-gradient()でグラデーションも指定可能です。複数の背景画像を重ねることもできます。

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

## 構文

```css
background-image: url(<url>) | <gradient> | none
```

## Tailwindでは

- `bg-none` → background-image: none
- 任意値: `bg-[url('/paper.png')]`
- 補足: グラデーションは bg-linear-* / bg-radial / bg-conic（linear-gradientの項を参照）。

## ブラウザ対応

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

## コード例

### 例1: 画像ファイルを背景に設定

```css
background-image: url('hero-bg.jpg');
```

### 例2: 線形グラデーション背景

```css
background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
```

### 例3: 円形グラデーション背景

```css
background-image: radial-gradient(circle, #ff6b6b, #4ecdc4);
```

## TIPS

グラデーションはCSS3の強力な機能。複数の背景画像も指定可能。

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

複数背景はカンマ区切りで「先に書いたものが上」に重なります。AIはこの重ね順を逆に説明することがあります（グラデーションオーバーレイ+写真の定番でよく間違える）。また意味のある画像をbackground-imageにするとalt相当がなく印刷やアクセシビリティで不利なので、コンテンツ画像はimg要素が原則です。

## AIへの依頼文例

- 写真の上に暗いグラデーションを重ねたヒーロー背景を、複数背景の重ね順に注意して実装して
- この装飾画像はbackground-imageとimgのどちらにすべきか、アクセシビリティ観点で判断して

## 関連プロパティ

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