I'm working on a project in which i have to apply a linear gradient to a page body. The gradient just doesn't appear on the page.
I first thought the problem was an error in my code (although no syntax error were detected by the browser), but it didn't work neither with a code example from documentation or gradient generator. Here is my CSS code now (provided by a generator) :
body
{
background: #c5deea; /* Old browsers */
background: -moz-linear-gradient(top, #c5deea 0%, #8abbd7 31%, #066dab 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#c5deea), color-stop(31%,#8abbd7), color-stop(100%,#066dab)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #c5deea 0%,#8abbd7 31%,#066dab 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #c5deea 0%,#8abbd7 31%,#066dab 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #c5deea 0%,#8abbd7 31%,#066dab 100%); /* IE10+ */
background: linear-gradient(to bottom, #c5deea 0%,#8abbd7 31%,#066dab 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c5deea', endColorstr='#066dab',GradientType=0 ); /* IE6-9 */
}
And ... the body background is juste invisible. The problem does not come from the html code, since when I change the CSS by something like :
body
{
background: #ff0000;
}
or with a background image it works ... Of course i tried on different machines, with different browsers from latest to old but none worked. I really don't know what's happening but it makes me insane : everything works except gradients and the error console does not show any errors ; i think i've tried anything i knew, but i'm still stuck. Thanks for helping.
EDIT :
Here is the full code :
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<p>test</p>
</body>
</html>
style.css
body
{
margin: 0;
padding: 0;
font: 15px/1.5 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif;
color: #4E443C;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.75);
background: #c5deea; /* Old browsers */
background: -moz-linear-gradient(top, #c5deea 0%, #8abbd7 31%, #066dab 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#c5deea), color-stop(31%,#8abbd7), color-stop(100%,#066dab)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #c5deea 0%,#8abbd7 31%,#066dab 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #c5deea 0%,#8abbd7 31%,#066dab 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #c5deea 0%,#8abbd7 31%,#066dab 100%); /* IE10+ */
background: linear-gradient(to bottom, #c5deea 0%,#8abbd7 31%,#066dab 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c5deea', endColorstr='#066dab',GradientType=0 ); /* IE6-9 */
}
How it appears in firefox 25.0.1 :
EDIT 2 :
In Firebug, i've got this :
Which means the gradient is computed by the browser ... but is obvisouly not rendered ...
Apparently the code you provided is working, as @NathanLee said. The problem however is with your browser. So make sure that your browser supports gradients