CSS Gradient in BODY but not full length with fallback

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