HTML and CSS Reference
In-Depth Information
avoid the worry of having to know the height of the element in the foreground. This concept is
tricky to explain with words alone, so let's look at an example.
First, we need the background image. We'll use one that has solid color and with what
appears to be a slightly darker border on the left side. We created the image (Figure 7-21) so
that it matches exactly the fixed width of the related-links list that will sit over the top of it.
Figure 7-21.
The background image (which will be tiled)
In the CSS, we pick an appropriate element to attach it to. An easy one is the outermost
wrapper
div
; everything else sits inside this container and will appear to sit over the top of this
background image. The image will be
•
Aligned to the right of the container element
•
Repeated along the y-axis
Here's the shorthand CSS that achieves this:
#wrapper {
background:#fff url(solid-bg.gif) repeat-y right;
text-align:left;
border:1px solid #033;
position:relative;
font-size:1.4em;
}
With that saved and a quick reload of the page, we see the result shown in Figure 7-22.
Figure 7-22.
The background image appears underneath the absolutely positioned related-links
section.
Hurray! It appears to have done the job, but once again, there's a problem that you need
to be aware of.
