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

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

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;
}

背景内容图像需要坚持到底

4 个答案: