CSS Cookbook

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:

h2 { 
 font: bold italic 2em Georgia, Times, "Times New Roman", serif; 
 background-image: url(tall_grass.jpg);
 background-repeat: repeat-x;
 background-position: bottom;
 border-bottom: 10px solid #666;
 margin: 10px 0 0 0;
 padding: 0.5em 0 60px 0;
}

Discussion

Make a note of the height of the image used for the background. In this example, the height of the image is 100 pixels (see 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-position can be a length unit (such as pixels), a percentage, or a keyword. To position an element on the x axis, use the keyword values left, center, or right. For the y axis, use the keyword values top ...