Cascading Style Sheets: Designing for the Web (3rd Edition)

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

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.

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