Question

Something similar to this question has been asked here –
HTML/CSS Gradient that stops at a particular height and continues further with a solid color, but as far as I can see this doesn’t work when using it on the body for a background color – which is what I want to achieve.

Specifically, I would like it to be light blue at the top of the page, gradient into dark blue 200px further down, and then continue in dark blue for ever.

Thanks to anybody who can help,

Alfo.

Answer 1

This should do the trick. Live example: http://jsfiddle.net/tw16/mBUZt/

I have used the latest format for css3 gradients:

html,body{height: 100%} /* added this as the example is an empty page */
body{
    background:    -moz-linear-gradient(top, #319ef7 0%,#1b388e 200px,#1b388e 100%);
    background: -webkit-linear-gradient(top, #319ef7 0%,#1b388e 200px,#1b388e 100%);
    background:      -o-linear-gradient(top, #319ef7 0%,#1b388e 200px,#1b388e 100%);
    background:     -ms-linear-gradient(top, #319ef7 0%,#1b388e 200px,#1b388e 100%);
    background:         linear-gradient(top, #319ef7 0%,#1b388e 200px,#1b388e 100%);
}