CSS Gradient in BODY but not full length with fallback - css

Question

I know that you can set a gradient for a specific height in a body tag.
So I have my body background that has a blue gradient for 300px height and then continues with plain white.
But I want to have a fallback for that gradient for older browsers, how can I make sure that these 300px will have a plain blue color and then white in older browsers that don't support css3 gradients?

Answer 1

Laurens' answer works, but if you don't want to introduce extra elements with no semantic meaning, you can make the html background white and give the body a height of 300 pixels.
html {
background: white}
body {
margin:0;
padding:8px;
max-height:300px;
overflow:visible;
background:blue;
background:linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);
}

Answer 2

set the style for older browsers first, then add it for css3-capable browsers:
#div{
background: blue;
background: linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);
}
It will fall back to blue if gradients are not supported.
edit: Kinda misread your question.
I think the easiest solution is to add the white color to the body tag, and then add the blue plain/gradient to a div that is nested in that body tag.
Hope this helps

Answer 3

try this
.cssgradients
{
background: /* CSS Gradiant */
}
.no-cssgradients
{
background: /* link 1px by 300px blue background */ top left repeat-x;
/* more */
}

Answer 4

If you include modernizr on your page you'll be able to target css3 styles to browser that support them, your body tag would gain a class based on whether the browser supports css3-gradiants or not and you can style appropriately.
.cssgradients
{
background: /* CSS Gradiant */
}
.no-cssgradients
{
background: /* link to 1px by 300px blue background */ top left repeat-x;
}