HTML and CSS Reference
In-Depth Information
In fact, we can tidy this up a little by placing all the background property/values in one
shorthand declaration that looks like this:
#header {
background:#033 url(01-header/bg-fade.gif) repeat-x bottom;
color:#fff;
height:55px;
position:relative;
}
You can see the result in Figure 8-4. The logo and tagline sit cleanly over the background
fade.
Figure 8-4.
Now with added gradient!
Adding in the Reflection Image
The final touch is to add in the reflection. At this point, you might be wondering why it's nec-
essary to do this separately. Why didn't we simply add this in to the logo in one complete
piece? As mentioned earlier, the reflection is not part of the company's standard logo—it's a bit
of polish that's added for the web site and only makes sense in that context. By separating the
reflection from the logo we're going to make it work as a “standard” logo when style sheets are
disabled. You'll see in a moment!
The logo image is contained in an
h1
element. The obvious place to attach the reflection
background image is in that element. However, the logo image is covering up the background,
so without a little work you'd never see the reflection. The trick is to make the h1 element
tall enough so that the foreground image is visible and the background is showing underneath
and below it. The reflection needs to be anchored at the bottom of the containing element:
#header h1 {
top:5px;
left:8px;
height:50px;
background: url(01-header/reflection.gif) no-repeat bottom;
}
Figure 8-5 shows the finished effect.
Figure 8-5.
It all comes together!
