background-image - 背景画像を指定する

投稿日:2016/02/22 / 更新日:2016/02/22

スタイルシートのbackground-imageは、背景画像を指定するためのプロパティです。

サンプルコード

下記は、背景画像を指定するためのサンプルコードです。

body {
	background-image: url( "/character.png" ) ;
}

スタイルシートでbackground-imageを指定したデモです。背景画像に、SYNCERのイメージキャラクター(リスの女の子)が設定されています。デフォルトでは、画像のサイズがドキュメントの幅より小さくても、自動で繰り返し表示されるようになっています。

body { background-image: url( "/character.png" ) ; }

値の指定方法は主に下記の通りです。リンクをクリックすると、デモを確認できます。

項目	説明
inherit	親要素の値を引き継ぐ。例の場合、`div`要素の背景画像は`background-01.png`に設定される。
initial	プロパティの初期値が適用される。この場合、`none`となる。
none	背景画像を設定しない。背景色を指定しなければ、そのまま奥の要素が透ける形となる。
url	背景画像となるファイルのパスを指定する。絶対パスでも相対パスでも大丈夫です。カンマ(`,`)で区切って複数指定することで、背景画像を重ね合せることができます。その場合、先に指定した画像の方が手前に表示されます。1つだけ指定した場合と、2つ指定した場合の違いを比べてみてくださいね。

2016年7月現在の、ブラウザのサポート状況は次の通りです。全ての主要ブラウザで、ベンダープレフィクスなど気にすることなく利用できます。