Styling the First ContainerThe first background image will be applied to the #container element using background: url(back01.gif) repeat-y 50% 0; as shown in Listing 21.6. This will repeat the background imageback01.gifdown the y axis. The image will be positioned so that 50% of the image will sit exactly 50% of the way across the background of the #container element (see Figure 21.6). Listing 21.6. CSS Code for Styling the First Container
body
{
margin: 0;
padding: 0;
font: 90% arial, helvetica, sans-serif;
background: #387A9B;
color: #333;
}
h1
{
background: #D36832;
color: #FFF;
margin: 0;
padding: .5em 3%;
border-bottom: 5px solid #387A9B;
}
h2, h3
{
margin-top: 0;
}
#container
{
background: url(back01.gif) repeat-y 50% 0;
}
Figure 21.6. Screenshot of the styled first container. |