Styling the <h2> ElementNow 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> Elementdiv#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. |