background-image

style.css

/* 画像ファイルを背景に指定（ダブルクォート） */
div.test { background-image: url("img/test.jpg");}

/* 画像ファイルを背景に指定（シングルクォート） */
div.test1 { background-image: url('img/test.jpg');}

/* 画像ファイルを背景に指定（クォートなし） */
div.test2 { background-image: url(img/test.jpg);}

/* 背景画像なし */
div.test3 { background-image: none;}

/* CSS グラデーションを背景に使う（linear-gradient） */
div.gradient { background-image: linear-gradient(to right, #0077cc, #00ccaa);}

/* 複数の背景画像を重ねる */
div.multi { background-image: url("top-layer.png"), url("bottom-layer.jpg");}

/* background の他プロパティと組み合わせた実践例 */
.hero {
	background-image: url("hero.jpg");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

<p style="background-image: url(/dics/dictionary-css/img/sample_bg.png);">背景画像を指定しています。</p>

デスクトップ

Chrome

1 以降 ○

Firefox

1 以降 ○

Safari

1 以降 ○

Edge

12 以降 ○

IE

11 ○

10 ○

9 ○

8 ○

7 ○

6 ○

Opera

3.5 以降 ○

2 以前 ×

モバイル

iOS Safari

1 以降 ○

Android Browser

4.4 以降 ○

3 以前 ×

Chrome Android

最新版 ○

デスクトップ版と同等の対応です

Firefox Android

最新版 ○

デスクトップ版と同等の対応です

※ バージョン情報は MDN に基づいています。

背景画像を指定できます。背景画像を設定しない場合は『none』と指定してください。

パスの記述方法は以下のどれでも構いません。

url("img/test.jpg");
url('img/test.jpg');
url(img/test.jpg);

ただし、ディレクトリ名やファイル名に半角スペースが含まれていたりする場合は『"』か『'』で括る必要がありますのでご注意下さい。

尚、Linux系のOSとunix系のOSではディレクトリ名やファイル名に半角スペースを含めることはNGです。半角スペースが含まれているディレクトリ名やファイル名は名前を変更してしまった方が無難です。
※『background-image』はこちらの記事でも詳しく解説しております。