Background-Color of BODY tag applied to the whole HTML [duplicate]

by

This is indeed confusing, but it is specified in the CSS 2.1 specification, clause 14.2 Background: if the computed value of background-color is transparent and the computed value of background-image is none for the html element (as things are by default), browsers must instead use the computed value of the background properties for the body element and must not render a background for body (i.e. make it transparent). That is, body background magically turns to html background if html lacks a background of its own – and this only affects background properties, not the true height of the body element.

I haven’t seen any rationale for this odd rule, which prescribes a kind of “reverse inheritance”. But it’s clearly specified in CSS 2.1 and applied by browsers.

As explained in other answers, you can make your content have a background of specific height either by setting a background on html (so that body background is really applied to body only) or by using wrapper element inside body and setting height on it (since the special rule applies to body only).

Thanks to Anne van Kesteren who pointed to the CSS spec when I asked about this in the WHATWG mailing list. (I thought I knew CSS 2.1 by heart but really didn’t. ☺)

More Related Contents:

  1. Why does my design elements look different in all browsers? UPDATE [closed]
  2. Set width on div
  3. How to Make columns in row [closed]
  4. How to center an element horizontally and vertically
  5. Make container shrink-to-fit child elements as they wrap
  6. Element will not stay centered, especially when re-sizing screen
  7. Is it wrong to change a block element to inline with CSS if it contains another block element?
  8. How to position text over an image with CSS
  9. CSS selector by inline style attribute
  10. :last-child not working as expected?
  11. Position an element relative to its container
  12. curved div with transparent top
  13. Horizontal list items
  14. HTML/CSS – Best practice for preserving white space on certain elements?
  15. Input size vs width
  16. Stretch background image css?
  17. Bootstrap – align button to the bottom of card
  18. How is the margin-top percentage calculated?
  19. How to align flexbox columns left and right?
  20. Inline Form nested within Horizontal Form in Bootstrap 3
  21. How can I make a div with irregular shapes with css3 and html5?
  22. How do I add a highlight behind the text via CSS so it looks like Instagram-one below?
  23. How to remove indentation from an unordered list item?
  24. Font-Face Not loaded
  25. It is possible to expand a textarea only with CSS?
  26. How to apply padding to every line in multi-line text?
  27. How do I vertically align something inside a span tag?
  28. Responsive CSS Circles
  29. Maintain image aspect ratio in carousel
  30. How to implement a Navbar Dropdown Hover in Bootstrap v4?

Leave a Comment