Use CSS3 in applications - Programming in HTML5 with JavaScript and CSS3 - page 250

FIGURE 4-16 The use of the opacity property

Applying a background image
Any HTML element can also contain a background image. This is achieved by specifying
the background-image property. The background property itself has many other options to
control its size and repeating pattern. However, to simply set a background image, you need
only specify the image to the backround-image property. The following code demonstrates
the use of this property to assign a background image:

p {
background-image: url('orange.jpg');
color: white;
}

Figure 4-17 shows the output of this code. The text color is changed to white to make it
more visible over the image. Table 4-3 explains more of the options available for formatting
the background image.

FIGURE 4-17 A background image on a text element

TABLE 4-3 Configuration options for the background image

Property Description

size Changes the dimensions of the image

Specifies whether the image should be repeated/tiled through the available
space of the box

repeat

Specifies whether the image should be clipped at a border clip

Specifies the origin position of the image within the box

position-x/position-y