can't change body background color using CSS reset

Asked 12/7, 2011 at 22:14 Answered 12/7, 2011 at 22:21

Here is my HTML code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <title>Hover Zoom</title>
        <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.3.0/build/cssreset/reset-min.css">
        <link rel="stylesheet" type="text/css" href="style.css">
        <meta http-equiv="content-type" content="text/html;charset=UTF-8" >
    </head>
    <body>

    </body>
</html>

Here is my CSS file code (style.css):

body {
    background-color: #FF0000;
}

but the background color of body does not change.

Without the CSS reset, it works fine. Can you suggest me a better CSS reset, or any other solution?

Robson answered 12/7, 2011 at 22:14 Comment(5)

what css reset do you use? Meyer's reset is broadly used – Invertase 12/7, 2011 at 22:15

Does the reset have a background-color attribute? – Scaffolding 12/7, 2011 at 22:15

@Sotiris, @waitinforatrain: Just visit the link yourselves and see: yui.yahooapis.com/3.3.0/build/cssreset/reset-min.css – Pearlpearla 12/7, 2011 at 22:16

@Pearlpearla I just focused in the style.css rule and commented. My overlooking – Invertase 12/7, 2011 at 22:20

@BoltClock: html{background:#FFF;} strikes again! – Gymnosophist 12/7, 2011 at 22:23

change your selector to

html, body{
    background-color: #FF0000;
}

Viscous answered 12/7, 2011 at 22:15 Comment(1)

What YUI actually wants you to do is set the background on only html - you don't need to also set it on body. – Gymnosophist 12/7, 2011 at 23:13

brenjt's answer is correct, but I'll provide an explanation for what is wrong and why that solution works:

Your CSS reset file sets the background color of html which is the entire page. You are only setting the body's background color, but your body is extremely small in height since you have no content. Consequentially, you do not see the body's background color.

Just set both the html and body in CSS like this:

html, body { background-color: #FF0000; }

EDIT:

Had you not set the html background color, then body's background color would represent the whole page. But since you are using an external source's CSS reset, you do not have the option of not setting the html properties.

Sergent answered 12/7, 2011 at 22:21 Comment(2)

Your answer isn't fully correct. Setting just the body background works fine, provided one isn't set for html. The relevant explanation is here: dev.w3.org/csswg/css3-background/#special-backgrounds – Gymnosophist 12/7, 2011 at 22:39

@thirtydot: You are correct, I missed that point. I updated my answer accordingly. – Sergent 12/7, 2011 at 23:2

Recommended topics

Hot tags