I'm seeing a double background gradient on this page in Google Chrome.... any ideas why?
http://www.starcraft-source.com/member/login/
I need it to be the solid blue color
3
-
did you use any bacground repeat or so ??kobe– kobe2010-11-29 04:10:55 +00:00Commented Nov 29, 2010 at 4:10
-
I'm using Chrome 7.0.517.44 and don't see it. Perhaps you should post a screenshotBazzz– Bazzz2010-11-29 19:00:56 +00:00Commented Nov 29, 2010 at 19:00
-
When I take the background-repeat off like KcSchaefer mentions it just turns white.Ben– Ben2010-11-30 14:02:28 +00:00Commented Nov 30, 2010 at 14:02
Add a comment
|
3 Answers
You mean the additional background gradient that appears below the footer?
html {
background:-moz-linear-gradient(center bottom , #1A405D 70%, #0A1C2D 92%) repeat scroll 0 0 transparent;
}
Needs to be
html {
background:-moz-linear-gradient(center bottom , #1A405D 70%, #0A1C2D 92%) no-repeat scroll 0 0 transparent;
}
You shouldn't be repeating this kind of gradient background.
Of course, now you'll need to deal with whitespace below the footer, but that's a different issue.
Comments
Personally, I'd avoid styling the html element. You can use the gradient on the background-image, to free up background for a colour. I'd use the following:
body{
background: #1A405D;
background-image: -webkit-linear-gradient(#0A1C2D,#1A405D);
background-image:-moz-linear-gradient(center bottom , #1A405D 70%, #0A1C2D 92%);
background-repeat:no-repeat;
}
This would give you a result as follows: http://jsfiddle.net/Sapphion/QJwA6/
Comments
You have put the gradient on the html element (which BTW is technically not wrong, but unusual), but the html doesn't fill the whole view port.
Try adding
html {
height: 100%;
}
