Menu
I'm trying to get a linear gradient working as the background of my page. The gradient is not showing at all, and the background remains white. Here's the minimal code to reproduce the issue:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<meta charset="utf-8">
<style type="text/css">
body
{
width:100%;
margin-left:-50%;
position:absolute;
left:50%;
background: rgb(0, 0, 0);
background: -moz-linear-gradient(270deg, rgb(0, 0, 0) 1%, rgb(21, 126, 250) 99%);
background: -webkit-linear-gradient(270deg, rgb(0, 0, 0) 1%, rgb(21, 126, 250) 99%);
background: -o-linear-gradient(270deg, rgb(0, 0, 0) 1%, rgb(21, 126, 250) 99%);
background: -ms-linear-gradient(270deg, rgb(0, 0, 0) 1%, rgb(21, 126, 250) 99%);
background: linear-gradient(0deg, rgb(0, 0, 0) 1%, rgb(21, 126, 250) 99%);
}
</style>
</head>
<body>
This is a test and a bad one at that.
</body>
</html>
Now if I remove the position:absolute, the gradient works. What am I doing wrong? I need to have that position:absolute, so what can I do?
Edit: tried this in Chrome and Firefox.
884
If you do not set an html background, body's background is applyed to HTML.
Since body is in absolute, it has a 0 size for HTML and it doesn't trigger anything for HTML layout.
try to apply:html {height:100%;}
and see what it does : http://codepen.io/anon/pen/JGApK
124
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
