background-image

style.css

/* Specify an image file using double quotes */
div.test { background-image: url("img/test.jpg");}

/* Specify an image file using single quotes */
div.test1 { background-image: url('img/test.jpg');}

/* Specify an image file without quotes */
div.test2 { background-image: url(img/test.jpg);}

/* No background image */
div.test3 { background-image: none;}

/* Use a CSS gradient as background */
div.gradient { background-image: linear-gradient(to right, #0077cc, #00ccaa);}

/* Stack multiple background images */
div.multi { background-image: url("top-layer.png"), url("bottom-layer.jpg");}

/* Practical example combined with other background properties */
.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);">A background image is specified.</p>

Desktop

Chrome

1+ ○

Firefox

1+ ○

Safari

1+ ○

Edge

12+ ○

IE

11 ○

10 ○

9 ○

8 ○

7 ○

6 ○

Opera

3.5+ ○

2 and below ×

Mobile

iOS Safari

1+ ○

Android Browser

4.4+ ○

3 and below ×

Chrome Android

Latest ○

Same support as desktop.

Firefox Android

Latest ○

Same support as desktop.

※ Version data is based on MDN.

Specifies a background image. Use none to remove any background image.

You can write the path in any of the following ways:

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

However, if the directory or file name contains spaces, you must wrap it in " or '.

Note that on Linux and Unix systems, spaces in directory or file names are not recommended. It is safer to rename any files or directories that contain spaces.
※ background-image is also covered in detail in this tutorial article.