The Background-Image Property

The background-image property lets you set an image as the background for an element.

Name:	background-image
Value:	[ <url> | none ]
Initial:	none
Applies to:	all elements
Inherited:	no
Percentages:	N/A

This property has two values:

• A URL

• The keyword none This is the default.

To specify an image as a background, enter the URL of the image as the <url> value. When specifying an image as the background, you should also specify a color (by using the background-color property). When the document is displayed, the image overlays the color. You should do this for several reasons:

• The color can be used to fill transparent regions of the image; otherwise, these areas remain transparent.

• It can be used to fill in the screen while the image is loading; for example, if loading takes too long.

• It can be used in place of the image if the image cannot be loaded; for example, if the browser cannot locate it.

The following rule specifies both an image and a color for the background. Figure 10.6 shows the result.

Figure 10.6. Setting both an image and a color as the background of an element.

 P {   background-image: url(ball.gif);   background-color: #FFAA00; }