background-image

要素の背景へ、画像やグラデーションのレイヤーを描くプロパティ。背景なし・画像・3種類のグラデーションを切り替え、単色との違いを比べます。

CSSの`background-image`とは？

画像なし・画像URL・線形・放射・円錐グラデーションをライブプレビューで切り替えながら、初期値、複数背景、フォールバックを初学者向けに解説します。

遊んでみよう

背景色は固定・画像レイヤーだけを切り替え

BACKGROUNDIMAGE

背景画像はありません

CSS

.element background-image: none;

値のパターン

背景画像の種類 background-image

background-imageの構成要素

01none

背景画像を表示しない

初期値です。背景画像のレイヤーを作らず、background-colorだけが見えます。

02url("image.svg")

画像ファイルを読み込む

url()へ画像の場所を書き、要素の背景として描画します。

03<gradient>

CSSで画像を作る

linear-gradient()などの関数は、ブラウザーが生成する画像として扱われます。

早見表

初期値はnoneです。画像ファイルだけでなく、線形・放射・円錐グラデーションや、カンマ区切りの複数背景も指定できます。

01none背景画像なし初期値

02url("image.svg")画像ファイルURL

03linear-gradient(...)直線に沿う色の変化線形

04radial-gradient(...)中心から広がる色の変化放射

05conic-gradient(...)中心のまわりを回る色の変化円錐

06image, image手前から重ねる複数背景カンマ区切り

よくある使い方

ヒーローへ写真を敷く

画像を中央へ置いて領域全体を覆うと、画面幅に合わせて見せ方が変わる大きな背景を作れます。

.hero { background-image: url("hero.jpg"); background-position: center; background-size: cover; }

ボタンへグラデーションを付ける

linear-gradient()を使うと、画像ファイルを用意せず、方向と色を指定してなめらかな背景を作れます。

.button { background-image: linear-gradient(135deg, #7258e8, #ffc4b7); }

画像へ読みやすい色を重ねる

半透明のグラデーションを先に書くと、その下の画像へ暗いレイヤーを重ねられます。

.banner { background-image: linear-gradient(rgb(0 0 0 / 0.35), rgb(0 0 0 / 0.35)), url("banner.jpg"); }

ポイント

背景画像だけに、大切な情報を置かない。

背景画像の内容は代替テキストとして読み上げられないため、意味のある情報は本文やimg要素でも伝えます。初期値はnoneで、すべての要素と::first-letter・::first-lineに適用でき、子要素へは継承されません。複数指定では最初の画像が最前面に描かれ、background-colorは画像より下のフォールバックになります。画像が読めない場合にも文字を読めるよう、十分なコントラストの背景色を併記します。