BODY背景图像在浏览器视口中被切断

Question

解决
方案我使用罗曼提出的解决方案,基于添加额外的DIV与位置:绝对,我测试它在IE7,IE8,IE9,Chrome和Firefox,似乎工作正常!

因此布局现在有3个完整的背景图像(我需要的是什么),甚至你可以使用BODY bg照顾它将被切断到浏览器的视口高度(在某些情况下仍然有用),"三和和一半"bg图像与"粘性页脚":)

唯一的缺点我发现#footerContent中的链接不是"可点击的",我用position:相对于这个容器解决了它.

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

---

我上传了

我正在为一个网站构建一个非常复杂的布局,我需要有3个背景图像来覆盖网页的背景.所以我有一个HTML风格,一个是BODY风格,最后一个是DIV,它是所有网页元素的容器(#contenedor)

我也唱了一个"粘性页脚"技术,让页脚"粘在"页面的底部,"主要内容"区域中的内容很少.

我遇到的问题是BODY bg图像被切断到Web浏览器的视口,我的意思是,它不会重复 - 在页面加载时显示的可见区域下方,并且内容为"高"足以使网页滚动.

我到现在为止尝试了什么:

1. 添加一个额外的容器DIV围绕所有(这对我来说没问题),但这样做它破坏了"粘性页脚"(也许我找不到正确的方法去做...我不知道).

2. 使用以下方法强制BODY与HTML一样高:

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

这解决了BODY问题,图像重复,但这也打破了"粘性页脚"...... :(

你可以看到一个样本:
带有"小内容"的索引都可以......底部的页脚等等
http://carloscabo.com/bg/index.htm

带有高内容的索引页面(简单的BR),向下滚动以查看BODY bg上的剪切图片
http://carloscabo.com/bg/index_tall.htm

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

Answer 1

由于一个我没有抓住的原因,似乎身体被卡住了100%的视口高度.它拒绝超越这一点,并且不会继承整个页面的真实高度.

但是,如果您不介意添加另一个辅助div,则可以轻松解决问题.

首先让我们从html开始:
- 在head部分之前添加一个helper 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:
- 从正文中删除背景,并将其放入新的帮助器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;
}

还有VOILA!
希望能帮助到你!!!