All geek questions in one place

CSS linear linear gradient from top to bottom

I am trying to create a linear gradient from top to bottom, for example:

Gradient I want!

Unfortunately, I get:

Gradient I get

Below 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 , I get the following:

Gradient with 90deg

I need this gradient, but it should be rotated 90 degrees, i.e. top to bottom, not left to right. I'm curious why 0deg seems to be something reminiscent of a repeat gradient.

I used browsers, Firefox 21 and Chrome 27. I would appreciate any advice.

+6
source share
4 answers

Try setting the background to <html> instead - it may be easier to manage. Then give it height:100%; so that he undoubtedly expands the entire page.

I also set it to no-repeat , so you only get one gradient instead, starting at the bottom level when you have more content.

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

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

Edit

fr13d indicated in the comments when with the gradient on html gradient will stop at the bottom of the first page, before any scrolling. That is, the gradient turns off when scrolling (noticeably if the background color is different from the bottom color of the gradient).

One way: set the body style instead:

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

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

+12
source

One way is to give the <body> and <html> elements an explicit height, since the first has neither, nor any content:

http://jsfiddle.net/qL9mg/1/

+1
source

try the following:

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

I agree with the solution from @DACrosby, but I recommend expanding the background with "fixed". In this case, your background will remain in place, and you will have a gradient for the entire site, not only from above.

 background: linear-gradient(0deg, red, blue 80%) fixed no-repeat;
0
source

Source: https://habr.com/ru/post/947598/

More articles:


All Articles