background-image

CSSプロパティ「background-image」の解説とサンプル。

背景画像を指定するプロパティ。

値に画像のURLを指定することで、背景画像を表示させることができる。ただし、background-repeatを一緒に宣言しない場合、指定した画像はボックス全面に繰り返し表示される。

「url('～')」で囲った部分に画像URLを記載する。

background-image:url('hogehoge.gif');

画像URL	絶対パス、相対パスのいずれも指定可能。相対パスを指定した場合、画像はCSSファイルが置かれた場所からの相対パスとなる。

[CSSの記述]

.sample { background-image:url('hogehoge.gif'); }

[HTMLの記述]

<p class="sample">テキストテキスト</p>

[ブラウザ上の表示]

背景画像を指定。

CSSレイアウト実践講座カテゴリ