Background-color Repeat-Y
Monday, March 31st, 2008One of the disadvantages of CSS is its inability to be controlled vertically, causing one particular problem which a table layout doesn’t suffer from. Say you have a column running down the left side of the page, which contains site navigation. The page has a white background, but you want this left column to have a blue background. Simple, you assign it the appropriate CSS rule:
#navigation
{
background: blue;
width: 150px
}Just one problem though: Because the navigation items doesn’t continue all the way to the bottom of the screen, neither does the background color. The blue background color is being cut off half way down the page, ruining your great design. What can you do!?
Unfortunately one of the only solutions to this is to cheat, and assign the body a background image of exactly the same color and width as the left column. You would use this CSS command:
body
{
background: url(blue-image.gif) 0 0 repeat-y
}This image that you place in the background should be exactly 150px wide and the same blue color as the background of the left column. The disadvantage of using this method is that you can’t express the left column in terms of em, as if the user resizes text and the column expands, it’s background color won’t.
Using this method the left column will have to be expressed in px if you want it to have a different background color to the rest of the page.