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

Question

If you want a vertical gradient background, ranging from white to shade of gray, how would you do it?

Answer 1

You can do this with CSS, see this link .

It uses CSS3 properties in good browsers and the IE property filterwhen 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 would recommend repeating your gradient image along the x axis, and then have a solid color that matches the color of the bottom gradient. In my example, it will be #eee.

The end result looks something like this:

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

Answer 3

The only way to make it work in virtually all browsers is to use an image.