background-image

背景・装飾

要素の背景画像を指定するプロパティです。グラデーションも指定可能です。

構文

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

コード例

例 1

background-image: url('hero-bg.jpg');
実行結果
背景画像パターン

画像ファイルを背景に設定

例 2

background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
実行結果
線形グラデーション背景

線形グラデーション背景

例 3

background-image: radial-gradient(circle, #ff6b6b, #4ecdc4);
実行結果
円形グラデーション背景

円形グラデーション背景

💡 TIPS

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

関連プロパティ

ブラウザサポート

全ブラウザ対応