LAYOUTS - CSS: Professional Techniques for Modern Layout - page 127

Figure 4-22: Placing the fi rst background image.

129

h ere, you see? h e point in the background image 750 pixels (25%) from the image's let edge
is lined up with the point 25% of the way across the container. As long as 25% of the width of
the container is less than 750 pixels, no problem!

To i ll in the right separator, we just need another image with a similar setup to the i rst. In
this case, we want a separator sitting between the center and rightmost columns, as in Figure
4-23. h e width of the rightmost column is 30%—20% for width and 5% for each of the side
margins. h at means we need the separator to fall 70% of the way across a great big wide
image, or 2,100 pixels for a 3,000 pixel image. To the let of the separator is transparency; to
the right, a i lled color. A little CSS and it's in place:

.contain { background : url(lb02.png) 0 70% repeat-y ; overflow : auto ;}

Now no matter what browser window width, the separators will be in the right place; and as
long as the window is less than 3,000 pixels wide, the trick won't break down.

One last trick here: If you want to i ll the center column with a color (see Figure 4-24), you
don't need to add any markup. You just assign a background color to the outer container.

.contain { background : #DECADE url(lb02.png) 70% 0 repeat-y ; overflow : auto ;}