So you want to make the background of your website red eh? You’ll probably put this in your CSS:
body {
background: red;
}Done!
You’re going about your business and then all the sudden one day this happens:
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.
As a quick note: setting background to
transparenton the html element doesn’t trigger the bug. The body background still flows on the whole page. Same goes withnonevalue.Thank you, you “fixed”my day ;)
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
Why does the body collapse? Seems less intuitive.
If it was a body like yours then it would be too strong to collapse :D
Why hello Mr Dorian, so when can we see your feet? You just show 75% of your :D
Well… now I’ve seen everything on CSS-TRICKS…
Weird! Good to know though.
MINDBLOW
“So you want to make the background of your website red eh?”
Just put the background on the HTML element! Problem solved.
Time saver article
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.
Eh? You been hangin’ out Canada?
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
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.
@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 ;)
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?
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.
It does seem a bit odd to style the html element. But sometimes it also makes sense, like when working with rems.
So that’s what happened to my demos on codepen. Thanks for sharing!
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.
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
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 */}
I am unable to replicate that problem in codepen.io… I’ve tried making a div in the body, etc.
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.
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
If anyone wonders what Normalize 2.1.1 looked like:
https://github.com/necolas/normalize.css/blob/691c71b98518b09a8c83412168a27653c302ef75/normalize.css
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.
Caught the Joe Burns reference ;)
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.
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!
This works fine for me
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.
I prefer not to use css into html ,but anyway it is a solution.
Its works for me but some other – Is it possible to add image background? Or color with gradient ?
Your my savior, thanks for this!
Thanks for this. It’s been driving me nuts.