CSS3 Sidebar Full Height Background Color

written by aext on August 23, 2010 in CSS & HTML with 16 comments

This is a small CSS3 trick which can do the Faux Columns trick without using image. The problem with sidebar in layout is it cannot extend automatically full height along with the content. We usually do it by creating an image for background and repeating it the way down for content container. Today, I will show you how we get the same result with CSS3. This technique is using the CSS3 gradient.

The old way

Lets review the way we usually do with the sidebar to make its background color to extend the way down of the page. According to the article from Alistapart, the author used the background image with a few pixels tall. The background image will have the wide background color for content column and one for sidebar column which looks something like

This background should used for container of both content column and sidebar column. Repeating this background vertically is what we always do:

background: url(images/bg.jpg) repeat-y;

It has been together with our design for 6 years. Nice, right?

Using CSS3 instead

CSS3 is awesome when it has gradient property. We can use this property for several purposes which can speed up our website since we use it instead of image. With CSS3, we can generate the background with more than 2 colors. To be concerned with the sidebar thing, we will have 2 colors generated and separated from two sides of the container background. I’ll go with Black and White – The use of white and black would be dramatic lol :)

The code using (for webkit browsers)

background: -webkit-gradient(linear, right top, left top, color-stop(0.30, #000000), color-stop(0.70, #FFFFFF));

“Color-stops” specified above will determine the ending position of each color in gradient. Let make it simple, the “black” goes from right in 70% of the container then stops. Next, the “white” start filling at position 80% of the container. If you dont assign the postions to stop colors, default will %50.

Now, the trick, let them meet each other at the same position:

background: -webkit-gradient(linear, right top, left top, color-stop(0.30, #000000), color-stop(0.30, #FFFFFF));

Now, this is the result

The color-stop above indicates that the left side should have black color at the point 30% of the gradient length, and the continue to fill the black color, but the black start filling color at the position 30% as well and it doesn’t have the space for two colors blending.

For Firefox:

background: -moz-linear-gradient(right center, #000000 30%, #FFFFFF 30%);

Some notes

Because Opera doesn’t support gradient at all, this technique won’t work in Opera browser. As well as Internet Explorer, its gradient filter doesn’t have color-stop function, so, this cheat will work in Firefox and Webkit browsers only.

However, since CSS gradient can be used anywhere an image can be used, we can use fallback to background image if the browser doesn’t support.

background: url(images/bg.jpg) repeat-y;
background: -webkit-gradient(linear, right top, left top, color-stop(0.30, #000000), color-stop(0.30, #FFFFFF));
background: -moz-linear-gradient(right center, #000000 30%, #FFFFFF 30%);

So, we will continue to wait when all the browsers support this technique, then we can fully say goodbye to background-image for our sidebar.