How to create a gradient background which works with most/all browsers?

Here is what I want to make, somehow:

1- A gradient background from top and down. There should be 2 colors, lets call them color1 and color2.

2- I want the gradient to be about one page, so it starts on top with color1, and then ends about one page down with color2.

3- Then I want color2 to continue all the way down for whateve开发者_开发知识库r size the page is.

Is this possible with css maybe?

Thanks

You can create an image that is a couple pixels wide and whatever vertical length you want for your "page size".

In CSS, there's a way to control the repeating of an image. So, you could do a repeat-x, to get the image to repeat left to right. Then, just set the background color of your site to whatever the second color is, so that if your content extends further, the user will only see Color2.

e.g. CSS

body {
    background-color: #b5b5b5; /*gray*/
    background-image: url(./images/body_bg_gray_1380px.gif); /*path to wherever your bg img is...*/
    background-repeat: repeat-x;
}

Use short-hand notation:

body {background:url(images/body_bg_gray_1380px.gif) repeat-x #b5b5b5}