How to get a vertical gradient background to work in all browsers?

Question

If you were to get a vertical gradient background starting from white down to some shade of grey, how would you do it?

Answer 1

You can do it with CSS, check out this link.

It uses CSS3 properties in good browsers, and IE's propriety filter property when using IE.

CSS

#gradient {
    background: #FFFFFF; /* old browsers */
    background: -moz-linear-gradient(top, #FFFFFF 0%, #CCCCCC 100%); /* firefox */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFFFFF), color-stop(100%,#CCCCCC)); /* webkit */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFFFFF', endColorstr='#CCCCCC',GradientType=0 ); /* ie */
}

...produces...

Answer 2

background: url('vertical-gradient.jpg') repeat-x #eee

I'd recommend repeating your gradient image across the x-axis, then having a solid color that matches the bottom gradient color. In my example, that would be #eee.

The end result is something like this:

AAAAAA <- start gradient image
BBBBBB
CCCCCC
DDDDDD
EEEEEE <- end gradient image
EEEEEE <- start solid color until end of document