Grow your CSS skills. Land your dream job.

Just One of Those Weird Things About CSS: Background on <body>

Published by Chris Coyier

So you want to make the background of your website red eh? You'll probably put this in your CSS:

body {
  background: red;
}

Done!

Check out this Pen!

You're going about your business and then all the sudden one day this happens:

Check out this Pen!

What in the heck? Why is the red cut off like that? I put red as the background color on the body?

You did, but the fact that that red color floods the background is just a strange anomaly of CSS. The body element isn't actually as tall as the browser window. It's only as tall as the content inside it, just like a div or anything else.

See:

In the absence of a background on the html element, the body background will cover the page. If there is a background on the html element, the body background behaves just like any other element.

Somewhere along the line, a background-color got set on the html element.

Perhaps you're using normalize.css 2.1.1, which included setting the background to white on the html element to "Prevent system color scheme's background color being used in Firefox, IE, and Opera." This has since been reverted, presumably because it caused this issue too widely.

To "fix" it, just remove the background on the html element, or move whatever you want to "flood" always to the html element as its behavior is consistant.

Comments

  1. As a quick note: setting background to transparent on the html element doesn’t trigger the bug. The body background still flows on the whole page. Same goes with none value.

  2. I noticed this “feature” a while ago.

    It’s very surprising when using gradients.

    Since then, I always set to my html a 100% height and overflow: hidden.

    http://browsecrosser.free.fr/elements/html/demo.html

  3. Why does the body collapse? Seems less intuitive.

    • Dave

      If it was a body like yours then it would be too strong to collapse :D

    • Martin

      Why hello Mr Dorian, so when can we see your feet? You just show 75% of your :D

    • Rodrigo Ibarra

      Well… now I’ve seen everything on CSS-TRICKS…

  4. Nathan

    Weird! Good to know though.

  5. “In the absence of a background on the html element, the body background will cover the page. If there is a background on the html element, the body background behaves just like any other element.”

    MINDBLOW

  6. Janson

    “So you want to make the background of your website red eh?”

    Just put the background on the HTML element! Problem solved.

  7. Thank you. I know this will save me frustration later down the road.

    With behavior like this, it seems like you should start adding CSS to the HTML element first. Something about that doesn’t feel right to me.

  8. Denis Leblanc

    Eh? You been hangin’ out Canada?

  9. Kalee Eversole

    Agreed. This solved my exact issue with this problem the other day. Would there every be a reason why this wouldn’t be the thing you

  10. Marco

    Other solution:

    html, body { height:100%; }

    or not?

    • html, body { min-height:100%; } would probably be better.

    • Make it min-height:101%
      If your page grows you will get vertical scroll bars anyway – better trigger their appearance beforehand. This will keep your layout consistent if your site features pages with different lengths.

      Alternatively you can use min-height:100% and add one single px to the page, e.g. by using padding. This lets a smaller page show the scroll bars, but it won’t scroll.

    • Rene

      @Rumpel, you can use overflow-y:scroll; for that purpose. Which is much neater.
      @Bennet, that will not work. Not exactly sure what the reasoning is but the parent needs to have an actual height and not just a min-height.
      I think that html{height:100%}body{min-height:100%} would be most logical but what I use depends a lot on the wrappers I truly need.

      Funny thing too, there is an IE bug with setting background images on the body but the bug does not exist when setting them on the html element. So for anyone wondering if there are problems with using the html element, well… less than on the body element ;)

  11. Kalee Eversole

    Just ran into this weirdness using normalize recently. Since this issue I’ve been declaring my main background style on the HTML element as a preventative measure on the site it gave me a fit on. Would there ever be a reason why doing this might be a bad idea?

  12. I never thought of this. I only put background on the body element and I never encountered the slightest problem with that. Somehow it feels wrong to me to put CSS properties on the html element. But well, thanks for the heads-up.

  13. Glen Cheney

    So that’s what happened to my demos on codepen. Thanks for sharing!

  14. Elijah Fowler

    Personally, I think styling for the background should go on the HTML element, mainly because it’s the first “layer” of the site. Kind of like painting/Photoshopping, you start with a canvas and then begin to paint your picture. I think the HTML element is like the canvas of the site. As far as I know there aren’t any issues with styling the HTML element.

    But it is interesting how the background properties will bleed over from the BODY to HTML element.

  15. sheriffderek

    Interesting…

    Throw a different color thick border or padding on the html and body of a project. I find that most websites’ html aren’t actually containing the body. Whacky results ensue on the most famous of websites. I end up using a sticky / weighted footer on a lot of smaller websites. For this I use html, body { height: 100% } .whatever-wrapper { min-height: 100%; } – and micro clear fix on the wrappers etc.

    The divs need to assert themselves. It’s like the divs are all “dude – this is my space bro.” Puffing up their chests. Gotta really tell things to hold their own and maintain their territorial boundaries to keep their parents wrapping around them properly. I seem to be floating everything these days within a smallest screen first mindset. Maybe this is why I run into this sort of thing so often

  16. gcyrillus

    This way of behaving use to be already like this in IE6 in standard mode !

    Why ? , parsed as xml , you can almost style every single tag in your page. (head,title, style, script, … yes , not lying) and since then, body was not anymore the only part of a document that could be seen on screen, but just a regular container holding the whole content.

    Just my 2 cents, if that helps to understand how it works.

    But still, it’s weird to notice that HTML can inherit background of BODY ;)

    <

    pre>head {display:block; /* from that , what ever is in head with opening/closing bracks can receive a display rule to be shown */}

  17. Luke Wenke

    I am unable to replicate that problem in codepen.io… I’ve tried making a div in the body, etc.

  18. Felix

    W3C [recommends](http://www.w3.org/TR/CSS2/colors.html#background recommends) setting background-color on body. There were some interesting discussions on github( #1, #2 ) regarding this issue.

  19. Simple, but thought provoking.

    And sorry, I can’t understand the last lines :\ Can someone explain how to fix it?

    • Look to see if there is a background element on the HTML tag If there is remove it or just make the HTML background what ever you want it to be

  20. All of you guys starts from BODY element.
    Why you don’t start style from HTML element?

    Don’t forget that HTML is there :) and make samples with it.

  21. Les

    Caught the Joe Burns reference ;)

  22. I had this issue some time ago, since then i always style html first. I also used html{height:100,1%}. Thanks for the explanation.

  23. I came across this problem recently and was so confused! This is so strange! I understand why it does that, now that you’ve explained it, but still a very strange feature.
    @Bennett, I was thinking the same thing. So thanks @Rene for clearing that up!

  24. This works fine for me

  25. Ed

    I’m glad I stumbled on this post today, as if it was posted just in time for what I experienced today. Could not for the life of me figure out why something that has always worked without any issues was suddenly causing issues.

  26. I prefer not to use css into html ,but anyway it is a solution.

  27. Its works for me but some other – Is it possible to add image background? Or color with gradient ?

  28. Your my savior, thanks for this!

  29. Ed O'Rourke
    Permalink to comment#

    Thanks for this. It’s been driving me nuts.

This comment thread is closed. If you have important information to share, you can always contact me.

*May or may not contain any actual "CSS" or "Tricks".