背景内容图像需要粘在底部

Question

我正在尝试推送我的背景内容图像并使其粘在页面底部。该图像不是页脚，因为图像将位于某些内容的后面。但是，当内容很少时，图像不应在顶部被切断，而当内容较多时，图像应粘在底部！

还没有什么工作。有人能给我一些建议吗？

这里有两个例子。一个包含适合窗口的内容，另一个包含更多内容。

这里有两个链接；

http://www.andrewa.org/testing/mosaik-test /content-imagebottom-test.html

http:// /www.andrewa.org/testing/mosaik-test/content-imagebottom-test2.html

提前谢谢你们！

Answer 1

我将使用 background-attachment:fixed; 将图像作为 body 的背景并添加：

html, body {
  height: 100%;
}

所以总数将是：

html, body {
  height: 100%;
}
body {
  background-image: url("images/bg_content.gif");
  background-position: center bottom;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

Answer 2

将背景应用到包装纸上，并将背景位置设置为底部，就像您所做的那样。诀窍是在包装器上设置与背景图像高度相同的最小高度。这将解决内容不足的问题，同时在内容很多时仍然随页面增长。

Answer 3

我相信你的问题有两个方面。首先，您为 #content-image div 设定了高度。去掉那个高度。

其次，因为该 div 中的内容是浮动的，所以您需要清除 #content-image div 上的浮动。类似：“溢出：隐藏；清除：两者”

尝试一下。

Answer 4

粘性页脚和粘性背景合二为一。将背景图像的高度作为页脚高度，并确定内容需要重叠多少图片。要让粘性页脚“消失”，请在主边距底部使用与页脚高度相同的数字。这是来自粘性页脚原始设计的适度设计：http://www. webcreationz.nl/de-ultieme-sticky-footer-code（抱歉，该网站是荷兰语）。

我刚刚想通了这一点。我希望它能帮助某人。

HTML：

<div id="container">

  <div id="main">text of your website</div>

  <div id="spacer"></div>

</div>

<div id="footer"></div>

CSS：

html, body { 
    height: 100%; 
}


#container {
width: auto; /* with number center with margin: 0 auto;*/
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin-bottom: -175px; /* height footer */
}

#main {
    height: auto;
    width: 618px;
    float: right;
    margin-top: 10px;
    padding: 20px;
    background-color: #FFF;
    border: 1px solid #E1E4EC;
    margin-bottom: -100px; /* overlap of 100 px into footer */

}

#spacer {
    display: block !important;
    height: 175px; /* height footer */
}

#footer {
    clear: both;
    height: 175px; /* height footer */
    width: auto; /* with number center with margin: 0 auto;*/
    background-image: url("images/plaatje jpg"; /* background picture */
    background-repeat: no-repeat;
    background-position: center bottom;
}