要素の背景画像を指定するプロパティです。url()で画像を指定するほか、linear-gradient()やradial-gradient()でグラデーションも指定可能です。複数の背景画像を重ねることもできます。
background-image: url(<url>) | <gradient> | none| bg-none | background-image: none |
任意値: bg-[url('/paper.png')]
グラデーションは bg-linear-* / bg-radial / bg-conic（linear-gradientの項を参照）。
background-image: url('hero-bg.jpg');画像ファイルを背景に設定
background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%);線形グラデーション背景
background-image: radial-gradient(circle, #ff6b6b, #4ecdc4);円形グラデーション背景
グラデーションはCSS3の強力な機能。複数の背景画像も指定可能。
複数背景はカンマ区切りで「先に書いたものが上」に重なります。AIはこの重ね順を逆に説明することがあります（グラデーションオーバーレイ+写真の定番でよく間違える）。また意味のある画像をbackground-imageにするとalt相当がなく印刷やアクセシビリティで不利なので、コンテンツ画像はimg要素が原則です。
写真の上に暗いグラデーションを重ねたヒーロー背景を、複数背景の重ね順に注意して実装して
この装飾画像はbackground-imageとimgのどちらにすべきか、アクセシビリティ観点で判断して
そのままAIチャットに貼り付けて使える依頼文の例です。ページ上部の「AI用にコピー」でこのページ全体をコンテキストとして渡せます。