CSS Background Linear Gradient from top to bottom

advertisements

I am attempting to create a linear gradient from top to the bottom like:

Unfortunately what I get is:

The following is my HTML:

<!DOCTYPE html>
<html>
<head>
    <title>Test Page</title>
    <link rel="stylesheet" href="test.css">
</head>
<body>
        Hi
</body>
</html>

And my CSS:

body{
  background: linear-gradient(0deg, white, blue 80%) ;
}

If I do 90deg, instead of 0deg then I get this:

I need this gradient - but it should be rotated by 90deg i.e. from the top to the bottom instead of left to right. I'm curious why 0deg seems to give something similar to a repeated gradient.

I have used browsers, Firefox 21 and Chrome 27. I'd be grateful for any advice.


Try setting the background on the <html> instead - may be easier to manage. Then give it a height:100%; as well so it for sure extends the whole page.

I also set it to no-repeat so you only get one gradient instead of it starting over at the bottom when you have longer content.

html{
    height:100%;
    background: linear-gradient(0deg, white, blue 80%) no-repeat;
}

http://jsfiddle.net/daCrosby/nEQeZ/1/

Edit

fr13d pointed out in the comments, when putting the gradient on html the gradient will stop on the bottom of the first page, prior to any scrolling. That is, the gradient gets cut off when you scroll (noticeable if the background color is different than the gradient's lower color).

One way around this is to put the styling on body instead:

body{
    height:100%;
    background: linear-gradient(0deg, yellow, blue 80%) no-repeat;
}

http://jsfiddle.net/daCrosby/nEQeZ/117/