After i changed the doctype to html5 the background gradient messes up and looks like this:
if i remove it again it becomes a smooth gradient again.
My CSS code is the following:
body {
background: #3c99d4;
background: -moz-radial-gradient(center, ellipse cover, #81e8f9 0%, #0358b5 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#81e8f9), color-stop(100%,#0358b5));
background: -webkit-radial-gradient(center, ellipse cover, #81e8f9 0%,#0358b5 100%);
background: -o-radial-gradient(center, ellipse cover, #81e8f9 0%,#0358b5 100%);
background: -ms-radial-gradient(center, ellipse cover, #81e8f9 0%,#0358b5 100%);
background: radial-gradient(ellipse at center, #81e8f9 0%,#0358b5 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#81e8f9', endColorstr='#0358b5',GradientType=1 );}
Try adding a height to both the
<html>and<body>elements if you'd like the gradient to fill the viewport:Example: http://jsfiddle.net/xZKPJ/3/