Приглашаем посетить
Добычин (dobychin.lit-info.ru)

Styling the <h2> Element

Previous Page
Table of Contents
Next Page

Styling the <h2> Element

Now that the <div> has been styled, the <h2> element will be used to position the second background image in the top-right corner.

The <h2> element's margins have to be turned off using margin: 0.

Next, the <h2> needs some padding on all edges except the bottom. This is achieved using padding: 20px 20px 0 20px.

Finally, the background image is added using background: url (lesson17b.gif) no-repeat 100% 0;. The horizontal background position is set to 100%, so the right edge of the image will sit against the right edge of the <h2> element. The image is also set to no-repeat so that it does not repeat across the background of the <h2> element as shown in Listing 17.4. The results can be seen in Figure 17.6.

Listing 17.4. CSS Code for Styling the <div> Element
div#pullquote
{
    margin: 2em;
    background: #09f url(lesson17a.gif) no-repeat;
}

div#pullquote h2
{
    margin: 0;
    padding: 20px 20px 0 20px;
    background: url(lesson17b.gif) no-repeat 100% 0;
}

Figure 17.6. Screenshot of styled <h2> element.

Styling the <h2> Element



Previous Page
Table of Contents
Next Page