Adding a Background Image

To add a background image to the <h2> element, use the background property. The image should be set to no-repeat so it doesn't reappear in the middle of a long heading. The image is shown in Figure 9.2.

Figure 9.2. Screenshot of the first imagewhich is applied to the <h2> element.

You will also need to set a width for this element because the background image is 220 pixels wide. If the width is left undefined, the heading will poke out the side of the round-cornered box.

You should also apply 5 pixels of padding on the top of the element as shown in Listing 9.4 and illustrated in Figure 9.3. This top padding will move the text down slightly so it doesn't sit hard against the background image.

Listing 9.4. CSS Code Setting Background Image, Width, and Padding

h1#header {     color: #036;     font: bold 100% arial, helvetica, sans-serif;     text-align: center;     background: url(chapter9.gif) no-repeat;     width: 220px;     padding: 5px 0 0 0; } 

Figure 9.3. Screenshot of heading with background image.