Creating Common Page Elements - Pro CSS Techniques - page 166

#header {
background:#033;
color:#fff;
height:55px;
position:relative;
}
#header h1,
#header h2 {
position:absolute;
padding:0;
margin:0;
}
#header h1 {
top:5px;
left:8px;
}
#header h2 {
top:20px;
left:193px;
}
To ensure that they are positioned properly, we've added position:relative to the header
div , and we also gave it a height of 55 pixels to match the original design. Figure 8-3 shows the
elements in position.
Figure 8-3. Our logo and tagline correctly positioned over a solid background color
Adding the Background Image
Next we need to add the background image. This is a simple process; we use the tiled fade
image and repeat it along the x-axis. It needs to be anchored to the bottom of the header div :
#header {
background-color:#033;
background-image:url(01-header/bg-fade.gif);
background-repeat:repeat-x;
background-position:bottom;
color:#fff;
height:55px;
position:relative;
}