CSS3 linear-gradient 100% height not fixed
10,230
Solution 1
Use min-height
instead of height
.
This will make the bg stretch to the full size of the body but never be less than the window displays.
Solution 2
html {min-height: 100%; }
body {min-height: 100%; }
this helped me alot
Author by
Isis
Updated on June 04, 2022Comments
-
Isis almost 2 years
I have html:
<!doctype html> <html> <head> <title>test</title> <meta charset="utf-8"/> <meta name="description" content="" /> <meta name="keywords" content="" /> <meta name="viewport" content="width=device-width"/> <meta name="format-detection" content="telephone=no"/> <!--[if lt IE 9]> <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> </head> <body> <section class="container"> //full html on jsfiddle </section> </body> </html>
And I have CSS
html, body {height:100%;margin:0;} body { background-color:#f4cbc9; background-image: linear-gradient(top, rgb(171,153,180) 0%, rgb(244,203,201) 50%, rgb(247,231,208) 100%); background-image: -o-linear-gradient(top, rgb(171,153,180) 0%, rgb(244,203,201) 50%, rgb(247,231,208) 100%); background-image: -moz-linear-gradient(top, rgb(171,153,180) 0%, rgb(244,203,201) 50%, rgb(247,231,208) 100%); background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, rgb(171,153,180)),color-stop(0.50, rgb(244,203,201)),color-stop(1, rgb(247,231,208))); background-image: -webkit-linear-gradient(top, rgb(171,153,180) 0%, rgb(244,203,201) 50%, rgb(247,231,208) 100%); background-image: -ms-linear-gradient(top, rgb(171,153,180) 0%, rgb(244,203,201) 50%, rgb(247,231,208) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ab99b4', endColorstr='#f4cbc9'); }
I need background (linear-gradient) for full height of body. No fixed, no repeat.
See JsFiddle pls