Question

背景问题的实例：http://webid3.feckcorp.com/

正如您所见，灰色剥离的背景图像流过页脚底部，并在页脚下方留下大约115个额外像素。包含背景图像的div为<div id="home_page_back">并包含在body元素中，两者都设置为100％的高度。

我希望背景图片能够点击页脚，然后停止...不再过去了。有人可以建议吗？

另外 - 我不想要将图像作为身体的背景。

干杯！

CSS的副本：

body {
    margin: 0px;
    padding: 0px;
    height:100%;
    background-color: #f3f3f3;

    font-family: Arial;
    font-size: 12px;
    color: #333333;
}

#home_page_back {
    background:#9C9D9B url(http://templatemints.com/rttheme13/images/background_images/abstract_background7.jpg) top center no-repeat !important;
    display: block;
    width: 100%;
    height: 100%;
    z-index: -1;
    position: absolute;
}

Answer 1

我认为这实际上是你构建标记的方式。将内容放在

下面

<div id="home_page_back" style="display: block;"></div>

在其中，删除100％高度规则并将其替换为overflow：hidden。内容将扩展为div out以查看背景图像。就像现在一样，你已经把它作为一个独立的，绝对定位的div，并给它100％的高度，这使得它作为你里面的背景图像很大，并且它扩展到它之后的任何内容，因为它内容现在忽略它在布局中（因为它绝对定位。）至少这是我要去的理论:)

Answer 2

如果你希望高度100％像这样工作，给身体元素100％高度，html元素也高100％。

Answer 3

将overflow: hidden;添加到您的身体css。并且请在尝试之前尝试验证您的HTML，然后再寻求帮助。

Answer 4

@feck;您是否希望sticky footer检查此answer。

Answer 5

使用：

#home_page_back {
    background:#9C9D9B url(http://templatemints.com/rttheme13/images/background_images/abstract_background7.jpg) top center no-repeat !important;
    padding-bottom: 30px;
}

将“home_page_back”div包含在html中的“content”div周围。

从#footer css中删除margin-top。

然后，如果需要，可以在页脚后面添加空格。

CSS背景100％高度问题

5 个答案: