2

I'm trying to set the background for the body element. I've changed the width of body, and I expect the background to fit in this width, but instead it's filling the whole screen. How would I fix it?

body {
border: 1px solid black;
width: 500px;
margin: 0 auto;
background: black;
}
Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
frosty
  • 2,559
  • 8
  • 37
  • 73
  • See also [Applying a background to and/or ](http://stackoverflow.com/questions/10947541/applying-a-background-to-html-and-or-body) and [ width is less than its background](http://stackoverflow.com/questions/11083984/html-width-is-less-than-its-background) – BoltClock Feb 15 '16 at 17:27

1 Answers1

4

You're actually doing it, except when you don't declare a background color for the html element, it then takes the background color of the body element. Hence, you're not seeing the difference.

Simply give the html element a different background color, and also give body some height:

html {
    background-color: red;     /* new */
}

body {
    border: 1px solid black;
    width: 500px;
    height: 500px;              /* new */
    margin: 0 auto;
    background: black;
}

Understanding the relationship between html, body and background-color.

The initial background-color for all elements is transparent.

If the background-color of the html element is not specified (i.e., transparent) then, under the rules of CSS, the browser gives it the background-color of the body element.

From the spec:

3.11.2. The Canvas Background and the HTML <body> Element

For documents whose root element is an HTML HTML element or an XHTML html element: if the computed value of background-image on the root element is none and its background-color is transparent, user agents must instead propagate the computed values of the background properties from that element's first HTML BODY or XHTML body child element. The used values of that BODY element's background properties are their initial values, and the propagated values are treated as if they were specified on the root element. It is recommended that authors of HTML documents specify the canvas background for the BODY element rather than the HTML element.

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
  • Ah. I see. So the HTML mimics the background of the body, when none is declared for itself. I never knew that. ;P – frosty Feb 14 '16 at 03:41
  • While you're here, though, do you know if there's a way to apply css to all elements except the body in a single go? – frosty Feb 14 '16 at 03:46
  • I updated my answer with more details about `html` and `background-color`. – Michael Benjamin Feb 14 '16 at 03:48
  • To target all elements except `body` you could try something like this: `body *`. This targets all descendants of the `body` element. – Michael Benjamin Feb 14 '16 at 03:49
  • Thanks. If you're still here, I've asked a new question on a new topic. If you're interested in answering: http://stackoverflow.com/questions/35388228/z-index-not-working-for-fixed-element – frosty Feb 14 '16 at 04:10