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

Question

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 whatever size the page is.

Is this possible with css maybe?

Thanks

Answer 1

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;
}