浏览器视窗中BODY背景图片被裁切

Question

浏览器视窗中BODY背景图片被裁切

csshtmllayout

5

已解决
我使用了Roman提出的解决方案，基于添加一个带有position:absolute属性的额外DIV，我在IE7、IE8、IE9、Chrome和Firefox中进行了测试，似乎工作正常！

所以现在布局有3个完整的背景图片（我需要的），甚至可以使用BODY背景，但要注意它将被裁剪到浏览器视口高度（在某些情况下仍然可能有用），"三个半"背景图与"粘性页脚"

我发现唯一的缺点是#footerContent中的链接无法点击，我使用position:relative来解决这个问题。

我对我提供的示例进行了更改，并将其上传到我的Dropbox，以防其他人也能找到它有用。感谢大家的答案。 http://dl.dropbox.com/u/512412/html_stackoverflow_solution.rar

我上传了

我正在为一个网站构建一个相当复杂的布局，其中我需要有3个覆盖网页背景的背景图像。因此，我在HTML样式中有一个，在BODY样式中有一个，在包含所有网页元素的DIV中有最后一个（#contenedor）

我也使用了"粘性页脚"技术，以便在"主内容"区域有小内容时将页脚"粘贴"到页面底部。

我遇到的问题是BODY背景图像被裁剪到Web浏览器的视口，我的意思是，它不会在加载页面时重复出现在可见区域下面，而且内容足够"高"，使得网页滚动。

我到目前为止尝试过的：

To add an additional container DIV surrounding all (that's ok for me), but doing that It brokes the "Sticky footer" (maybe I did not found the right way to do it... I don't know).

Force the BODY to be as tall as the HTML using:

html>body {  
min-height:100%;  
height:auto;  
height:100%; }

这解决了BODY的问题，图片重复了，但也破坏了“粘性页脚”... :(

您可以查看一个示例：
带有“小内容”的索引页面都正常...页脚在底部等等。
http://carloscabo.com/bg/index.htm

带有高内容（简单的BRs）的索引页面，请向下滚动以查看BODY背景图像的裁剪
http://carloscabo.com/bg/index_tall.htm

您还可以在以下URL中下载此示例的所有文件以进行本地测试。
http://carloscabo.com/bg/stackoverflow_html.zip

- Carlos Cabo

你需要支持哪些浏览器？看起来你好像需要支持IE6.. - thirtydot

Chrome，Firefox和IE7+（如果可能的话）。我不需要IE6 :) - Carlos Cabo

3个回答

3

The solution I found for this problem is to set min-height to the

min-height: 900px;

900px was the actual height of the background image i used.

- Nikolay Ivanov

1

为了更好地帮助您，我需要看到您想要实现的确切内容，但是我会尽力提供一些提示。

您不应该将背景应用于 HTML 标签。
不要玩弄您的 body 的 height 属性，这会破坏粘性页脚，而是让 body 高度随内容自然增长。
body 将随内容增长，但 html 不会。 html 标签不是容器。

- Germán Rodríguez

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- romanporras · Accepted Answer

出现了一个我无法完全理解的问题，似乎body元素的高度被限制为视口的100%。它拒绝超过这个点，并且不会继承整个页面的实际高度。但是，如果您愿意添加另一个辅助div，您可以轻松解决此问题。首先让我们从HTML开始：
- 在head部分之前添加一个辅助div。

<div id="contenedor">

    <!--HELPER DIV GOES HERE: BACKGROUND FIX-->
    <div id="bgfix"></div>

    <header id="arriba">
        ...
    </header><!--header#arriba-->

    ...

<div class="push"><!--Sticky Footer Push--></div>
</div><!--contenedor-->

现在让我们修改CSS：
- 从body中删除背景，并将其放入新的helper div中。

body {
    height:100%;
    min-height:100%
    text-align:center;
//  background:url(../img/bg_body.png) center top repeat-y;
    color:#fff;
}

#contenedor {
    position:relative; /* For #bgfix to attach here */
    ...
}

#bgfix {
    background:url(../img/bg_body.png) center top repeat-y;
    position: absolute;
    width: 100%; height: 100%;
    z-index:-1;
}

现在，完成了！
希望这可以帮到你！