<Body> Background-Color Property Doesn't Work Correctly with HTML5 Doctype

body background-color property doesn't work correctly with HTML5 DOCTYPE

Because you were missing the DOCTYPE — which really should have been there to begin with — your page was being rendered in quirks mode. In quirks mode, browsers are known to stretch the height of body to 100% of the height of the viewport. In standards mode, which is triggered by having an appropriate DOCTYPE, body behaves like a regular block-level element, being only as tall as its contents by default. In your case, this results in body's background color not being visible.

There's nothing inherently wrong with your CSS, which is why it validates, but if you want body to stretch to the height of the viewport in standards mode, you should add the following height properties to html and body respectively:

html {
  height: 100%;
}

body {
  min-height: 100%;
}

body background color not showing?

Comment your Bootstrap include and see if the body is applied. You should try to test with the minimal amount of code first and then add in things.

If that doesn't work, you can use an inspector in Firefox or Chrome to see what CSS effects are applied.

You also may want to use the network inspector in Chrome to determine if your stylesheet is actually even getting downloaded or if the link is incorrect.

background-color not working with body

Two possibilities I can think of are:

1) Your style is being overridden by another style. You could try background-color: gray !important; and see if that works.

2) Your body doesn't actually have any height (i.e. if there are floated items that haven't been cleared) Inspect it in Chrome or Firefox and make sure the body takes up the full height of the page.

Div background color cuts off at viewport with doctype

The reason why the background doesn't go all the way to the right is:

By default a block element like <div> occupies the entire width of the parent, given there is no blank space in the text sample - A_Fairly_Long_Word_Or_Image, which means it renders as a single word, and won't wrap, so the the text overflows in a smaller viewport, but not for the background that sets on the div.

However, under quirks mode (without a doctype), it behaves differently, according to this article:

Overflow is treated by expanding a box. When the content of an element does not fit into the dimensions specified for it (explicitly or implicitly), then overflow: visible (the default) means that the content overflows while the box dimensions are as specified. In Quirks Mode, the dimensions change; this can easily been seen e.g. if the box has a background color or a border.

How to fix that within standard mode?

Please use the standard HTML5 <!doctype html> it is highly recommended. You can set the container div to display: inline-block; + min-width: 100%;, As the size of an inline block depends on the content inside, and the min width will make it to expand even if the viewport is larger, check out the jsFiddle, resize the output frame and see.

.container {  background-color: black;  font-size: x-large;  color: red;  display: inline-block;  min-width: 100%;}

<div class="container">A_Fairly_Long_Word_Or_Image</div>

can't change body background color using CSS reset

change your selector to

html, body{
    background-color: #FF0000;
}

Couldn't change background color with css

you did change body background color but you have this class on your background and you styled it:

body.special-page{
    background: url("../img/special-page-bg.png") no-repeat scroll top center #2b3237;  
}

try to this :

body.special-page{
    background: f1f9f9;  
}

Why does adding !DOCTYPE html shrink my web page's body?

Cause (referencing comment by Frederic Hamidi): the HTML5 body is elastic on the Y-axis.

Solution: Make the body (updated:) and hmtl height 100%.

html, body{
    height: 100%;
}

doctype html is messing up my CSS

in today's standard, do i really have to add <doctype>?

You don't have to do anything, but the absence of the DOCTYPE is essentially asserting that you conform (in the loosest sense of the term) to an unknown/inconsistent "quirks" standard.

I imagine the solution is as simple as setting the height of the parent container to 100% or to a specific pixel height.

ensure that height is set on the HTML and BODY elements.
ensure that height is set on any parent containers.

Working example: http://jsfiddle.net/7xxFj/

<div id="one">
    First column
</div>
<div id="two">
    second column
</div>

HTML, BODY { height: 100%; }
#one { height: 100%; width: 30%; float: left; background-color: red; }
#two { height: 100%; width: 70%; float: left; background-color: blue; }

As @BoltClock pointed out in the comments, you probably want a layout that can extend beyond 100%. This requires a little more effort (but still works well within the standard).

This article shows several methods for accomplishing layouts with equal column heights. More methods here.

<Body> Background-Color Property Doesn't Work Correctly with HTML5 Doctype