CSS

Cascading Style Sheets background-image property.

background-image

　background-imageプロパティは、背景に画像を指定する際に使用します。body要素や table要素だけではなく、p要素、div要素、span要素などにも背景画像を指定することができます。

セレクタ {
	background-image: url(画像のパス);
}

　背景画像は URL で指定します。「画像のパス」部分には、画像への絶対パス(http://〜ファイル名)または相対パス(../../ファイル名、など)で、どの画像を表示するのかを指定します。

　スタイルシート部分を外部ファイルにしている場合には、HTMLファイルから見た相対パスではなく、外部スタイルシートファイルからの相対パスで指定しなくてはならないので注意してください。

.bg_test {
	background-image: url(sample.jpg);
}

　画像を指定するのはたったこれだけです。

　背景に画像を指定する際には、背景色と文字色も同時に指定するようにした方がいいかもしれません。 これは、ユーザーの環境により背景画像が表示されない場合に、背景色と文字色の関係により、文字が読みにくくなってしまうことがあるからです。

値

URI (URL) で画像ファイルを指定

絶対パス（http://〜ファイル名）で画像ファイルを指定する。
相対パス（../../ファイル名、など）で画像ファイルを指定する。

none

背景に画像ファイルを使用しないことを明示します。これが初期値です。

Sample

<div class="bg_test"></div>

.bg_test {
	width: 200px;
	height: 200px;
	background-image: url(sample.jpg);
}

　background-imageプロパティだけだと画像のサイズが 0×0 サイズになってしまい何も表示されていないのと同じになってしまいますので、widthプロパティと heightプロパティを使って 200×200px のサイズに設定しています。

　この画像は、元の画像が 1920×1080px と大きなサイズです。それの左上の隅の 200×200px が切り取られて表示されています。

元画像(1920×1080px)