http://jsfiddle.net/julien_c/GmAL4/
我发现如果您将CSS背景应用于body，则会占用整个页面（无论body的实际高度或宽度是多少）。
但是，如果您对html和body同时应用CSS背景，则body 的背景不占用整个页面。
这种差异是预期的行为吗？
如何叠加两个全屏背景（例如背景颜色和半透明图像？）
答案 0 :(得分：55)
这是correct behavior。 1 In standards mode，body，as well as html，不会立即占据视口的整个高度，即使它只是在后者应用背景时也是如此。事实上，html元素将采用body的背景，如果你没有给它自己的背景，html会将它传递给画布：
根元素的背景成为画布的背景，其背景绘画区域延伸到覆盖整个画布，尽管任何图像的大小和位置都相对于根元素，就像它们仅为该元素绘制一样。 （换句话说，背景定位区域是根元素确定的。）如果根的“背景颜色”值是“透明”，则画布的背景颜色取决于UA。根元素不会再次绘制此背景，即其背景的使用值是透明的。
对于其根元素是HTML
HTML元素或XHTMLhtml元素的文档：如果根元素上的'background-image'的计算值为'none'且其'background- color'是'透明'，用户代理必须从该元素的第一个HTMLBODY或XHTMLbody子元素传播背景属性的计算值。BODY元素的背景属性的使用值是它们的初始值，传播的值被视为在根元素上指定它们。建议HTML文档的作者指定BODY元素的画布背景而不是HTML元素。
也就是说，您可以将任何背景图像叠加在单个元素（html或body）上的背景颜色上，而不必依赖于两个元素 - 只需使用{{1 }和background-color或将它们组合在background-image速记属性中：
background如果您希望合并两个背景图像，则需要依赖多个背景。主要有两天时间来做这件事：
在CSS2中，这两个元素的样式都派上用场：只需将背景图像设置为body {
background: #ddd url(background.png) center top no-repeat;
}
，将另一个图像设置为html，您希望将其叠加到第一个图像上。为确保body上的背景图像以全视口高度显示，您还需要分别应用body和height：
min-height顺便提一下，您必须分别指定html {
height: 100%;
background: #ddd url(background1.png) repeat;
}
body {
min-height: 100%;
background: transparent url(background2.png) center top no-repeat;
}
和height到min-height和html的原因是因为这两个元素都没有任何内在高度。默认情况下，两者都是body。视口具有100％的高度，因此从视口中取出height: auto，然后将height: 100%作为最小值应用于允许滚动内容。
在CSS3中，语法已经扩展，因此您可以declare multiple background values in a single property，无需将背景应用于多个元素（或调整body / height）：
min-height唯一需要注意的是，在单个多层背景中，只有最底层可能具有背景颜色。您可以在此示例中看到上层缺少body {
background: url(background2.png) center top no-repeat,
#ddd url(background1.png) repeat;
}
值。
请不要担心 - 即使您使用多层背景，上面指定的传播背景值的行为也会完全相同。
如果你需要支持旧的浏览器，你需要使用CSS2方法，这种方法一直支持IE7。
我在this other answer下的评论解释了fiddle transparent，body实际上是如何从默认边距html偏移的，即使看起来它被填充了再次由于这种看似奇怪的现象。
1 这可能源于设置background的HTML bgcolor和body属性，导致背景属性适用于整个视。更多关于here。
答案 1 :(得分：2)
建议阅读：
https://css-tricks.com/just-one-of-those-weird-things-about-css-background-on-body/
基本上，如果background元素上没有html，则body background将覆盖该页面。如果background元素上有html，则body background的行为与任何其他元素一样。