<body> 宽度和高度答案

【问题标题】：<body> width & height<body> 宽度和高度
【发布时间】：2012-01-08 04:47:12
【问题描述】：

我在 body 标记后的 div 中有一个背景图像重复。我给 body 和 div 都设置了 100% 的宽度和高度，因为即使没有足够的内容可以显示，我也希望该图像显示在整个浏览器上。

如果页面上没有滚动条，如果显示的内容很多并且我需要向下滚动，则背景图像会损坏，然后是白色的。

有什么帮助吗？

【问题讨论】：

有什么理由不给<body>附加背景吗？

标签： html

【解决方案1】：

background-attachment: fixed;

background-attachment:fixed 会将你的背景保持在一个固定的位置，这样当你向下滚动时背景不会消失。

更新：

在您的情况下，背景不附加到<body>，而是两个嵌套的子元素。我提出了两种可能的解决方案：

方法一：不改变HTML

当前文档结构：

<body>
    <div id="mainbg">
        <div id="bg">

为此建议的 CSS：

html, body { margin:0;padding:0; } /*Included in answer, because it's important*/
#mainbg {
    height: 100%;
    overflow: auto;
}
#bg {
    min-height: 100%;
}

方法二：推荐方案：

将背景（图像）属性移至<body> 元素，并移除<div id="mainbg">。

<body>
    <div id="bg">

CSS：

html, body { margin:0;padding:0; }
body {
    background: url(../images/main-bg-pat.png) 0 0;
}
#bg {
    min-height: 100%;
}

【讨论】：

为不支持 CSS3 的旧浏览器添加 position: fixed。但是不支持我的代码的移动浏览器需要您的代码。
@Yogu All (modern) browsers（不包括IE6-）支持这个属性。
@RicardoRibeiro 你能把你的页面显示在“不起作用”的地方吗？是否有其他元素隐藏了您的图像？
我在本地工作。不，我认为不是这种情况，因为当我在 Mozilla 中打开 firebug 并将鼠标悬停在 body 标签上时，body 标签本身会在背景图像结束时结束。之后的一切都是白色的，内容仍然存在
您是否将background-attachment 放在 background:....url(...) 的声明之后？如果您将background:...url(...)...; 放在background-attachment 之后，则该属性将被覆盖。如果您想在一个短属性中组合多个background 属性，请查看this page。