CSS3

プロパティ

background-image

→● mdn

背景画像のソース。

このプロパティは、要素の（何枚かの）背景画像を設定する。 最初の層値による画像が（利用者から見て）最も手前に描かれ、後続する層値による各 画像は 先行する層値による画像の背後に描かれる。ここで：

<bg-image>

＝<image> | none

<image> ○

<DIV style="background-image:url(Com/BG1.jpg);
 width:50px; height:50px;
">あ</DIV>

<DIV style="border:1px solid red;
 background-image:url(Com/BG1.jpg), url(Com/BG2.jpg);
 background-repeat:no-repeat;
 background-position:0 0, 0 50%;
 width:100px; height:100px;
">あ</DIV>

none

1 枚の画像層として数えられつつ、何も描かない。画像として機能しないものも、同様に 1 層に数えられつつ、何も描かない ― 例えば、画像が［空（横幅または縦幅が 0）／ダウンロードに失敗した／表示できない（形式が未サポート）］ときなど。

background-image と他の background-＊ プロパティの各 層値から、背景画像層がどの様に形成されるかについては、複数の背景画像による多層化を見よ。

作者は、背景画像を設定するときは、画像が可用でないときでもテキスト色とのコントラストは保全されるように、background-color も指定するべきである。

アクセス能の理由から、作者は、重要な情報を供する際に、背景画像ばかりに頼るような手法をとるべきでない。Web 内容をアクセス可能にするための指針 F3 [WCAG20] 【日本語訳】を見よ。非グラフィックな呈示の下では、画像はアクセスし得ず、また，高コントラスト表示モード下では、背景画像の表示が特にオフにされることもある。

注記： CSS においては、content プロパティにより、スタイル的な前景画像を供せる。（意味論的に重要な前景画像は、文書マークアップを通して供されるべきである ─ 例えば HTML の IMG タグなど。）

注記： 画像の一部分を取り出して表示させる用途に、媒体素片識別子 を利用できる。CSS Images モジュールが、画像形式用のフォールバック構文を供し、画像表示用に追加の制御を含めることになる。

body { background-image: url("marble.svg") }
p { background-image: none }
div { background-image: url(tl.png), url(tr.png) }

テスト