Adding a Background Image

To add a background image to the heading, use the background property. You can then specify the url and the repeat value as shown in Listing 8.6. In this case, the image is set to repeat-x, so it will repeat across the x axis only.

The results can be seen in Figure 8.3. The background image can be removed or changed to suit your needs.

Figure 8.3. Screenshot of finished heading.

Listing 8.6. CSS Code Adding a Background Image

h1#header {     color: #036;     font-size: 120%;     font-weight: normal;     text-transform: uppercase;     text-align: center;     letter-spacing: .5em;     padding: .4em 0;     border-top: 1px solid #069;     border-bottom: 1px solid #069;     background: url(chapter8.jpg) repeat-x; }