Recipe 2.13. 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 2-18.

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; }

Figure 2-18. A background image used with a heading

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 2-19).

Figure 2-19. 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, center, or bottom.

When the location of the other axis isn't present, the image is placed in the center of that axis, like in Figure 2-20.

background-position: bottom;

Figure 2-20. 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 repeats along the x-axis.