0

I am following a tutorial in a book and it says to use CSS to set different background colors for the html and body elements. The body is capped at a max-width of 1020px, so the html background color will show on either side if the window is wide enough. Here is the CSS code for the background colors, the layout CSS is in a separate file:

html{
    background-color: rgb(235, 177, 131);
    background-color: hsl(27, 72%, 72%);
}

body{
    color: rgb(91, 91, 91);
    background-color: ivory;
}

I have tested this in Chrome, Safari, and Firefox and all three ignore the html style rule. However, when I specify the background color inline, such as:

<html style="background-color: hsl(27, 72%, 72%);">

Then it works. Does anyone know what might be going on here?

** EDIT **

Here is the beginning of the HTML file, you can see that I am linking the stylesheets in the head element:

<!doctype html>
<html style="background-color: hsl(27, 72%, 72%);">
<head>
   <meta charset="utf-8" />
   <meta name="keywords" content="triathlon, running, swimming, cycling" />
   <title>Tri and Succeed Sports</title>
   <link href="tss_layout.css" rel="stylesheet" />
   <link href="tss_styles.css" rel="stylesheet" />
</head>

** UPDATE **

Found the problem. I was missing the semi-colon at the end of the @charset directive before the html style rule. This caused the browser to ignore it. Works fine now.

MRichards
  • 77
  • 1
  • 11
  • Isn't html and body not essentially the same in terms of displayed content? You are only ever seeing the body and not the head, so setting a background on html seems quite obsolete and useless to me – techfly Jun 24 '17 at 20:52
  • This works for me, can you add the code when you are linking de css stylesheet? – Bitito Jun 24 '17 at 20:56
  • Why are you specifying background-color twice in html element? – Rubycut Jun 24 '17 at 20:59
  • Voting to Close as this question was caused by a problem that can no longer be reproduced or a simple typographical error. While similar questions may be on-topic here, this one was resolved in a manner unlikely to help future readers. – Paulie_D Jun 24 '17 at 21:27
  • @Aenadon: It only is now that multiple backgrounds are reasonably well-supported. See https://stackoverflow.com/questions/10947541/applying-a-background-to-html-and-or-body/10947583#10947583 – BoltClock Jun 25 '17 at 05:17
  • @BoltClock oh... Seemed so strange, but now I get it, thanks – techfly Jun 25 '17 at 08:58

1 Answers1

0

You could try creating a class like 

.html {
    background-color: red;
}

and then

<html class="html">

</html>

Also, here is a fiddle of your code, and pictures in Chrome, Firefox, and IE

Chrome:

Chrome JSFiddle Display

Firefox: Firefox JSFiddle Display

IE (trashy browser on win7): IE JSFiddle Display

EDIT: I shrunk the body 4 times so I could show it works.

InvincibleM
  • 519
  • 2
  • 12