Recipe 1.9 Stylizing a Heading with Text and an Image

Problem

You want to place a repeating image at the bottom of a heading, like the grass in Figure 1-17.

Figure 1-17. A background image used with a heading

Solution

Use the background-image, background-repeat, and background-position properties:

 solid #666;
 margin: 10px 0 0 0;
 padding: 0.5em 0 60px 0;
}

Discussion

Figure 1-18).

Figure 1-18. An image of tall grass

Set the background-repeat property to a value of repeat-x, which will cause the image to repeat horizontally:

background-image: url(tall_grass.jpg);
background-repeat: repeat-x;

Next, set the background-position property to bottom:

background-position: bottom;

The background-position can take up to two values corresponding to the horizontal and vertical axes. Values for background-positionleft, center, or right. For the y axis, use the keyword values top, center, or bottom.

When the location of the other axis isn't present, the image is placed in the center of that axis, as shown in Figure 1-19.

background-position: bottom;

Figure 1-19. The image aligned on the bottom of the y axis and in the middle of the x axis

So, in this Solution, the image is placed at the bottom of the y axis but is centered along the x axis.

See Also

Recipe 2.4 for setting a background image in an entire web page.