使用绝对页脚重复背景图像答案

【问题标题】：Repeating background image with absolute footer使用绝对页脚重复背景图像
【发布时间】：2013-12-07 00:48:07
【问题描述】：

我正在尝试将重复图像作为我运行的博客的背景。

我无法显示页脚。

编辑：提供的代码有标题、重复图像和页脚。这是在背景图像中编码的最简单方法。

body {

   background:#1b0e11;    
   color:#170d23;    
   font:11px/18px arial, verdana, helvetica, sans serif;    
   margin:0px 0px 0px 0px;
   padding:0px;    
   background-image: url(http://i1331.photobucket.com/albums/w595/4V3D15/header_zpsf652d36b.png), url(http://i1331.photobucket.com/albums/w595/4V3D15/middle_zps8a8ab3d1.png), url(http://i1331.photobucket.com/albums/w595/4V3D15/footer2_zpsc6e75bc2.png);    
    background-repeat: no-repeat, repeat-y, no-repeat;    
   background-position: center top, center center, center bottom;  
     }

【问题讨论】：

所以.....你只是要向我们展示背景，与页脚无关？

标签： html css background-image sticky-footer repeat

【解决方案1】：

只需删除/注释掉它：

// background-repeat: no-repeat, repeat-y, no-repeat;

不太确定页脚的代码在哪里，你能提供一个小提琴吗？

【讨论】：

我认为这不是 OP 所要求的。背景似乎工作正常。看看我的答案小提琴。我认为他们的页脚有问题，并且没有包含任何代码供我们使用。所以再次在我的小提琴中，我制作了一个快速页脚，向他们展示absolute 页脚可以放置在该背景之上。我认为这就是 OP 想要的。

【解决方案2】：

我没有发现您提供的代码有问题。

我尝试使用您的背景创建页脚。

HTML：

<div class="footer">Footer</div>

CSS：

body {
    background:#1b0e11;
    color:#170d23;
    font:11px/18px arial, verdana, helvetica, sans serif;
    margin:0px 0px 500px 0px;
    padding:0px;
    background-image: url(http://i1331.photobucket.com/albums/w595/4V3D15/header_zpsf652d36b.png), url(http://i1331.photobucket.com/albums/w595/4V3D15/middle_zps8a8ab3d1.png), url(http://i1331.photobucket.com/albums/w595/4V3D15/footer2_zpsc6e75bc2.png);
    background-repeat: no-repeat, repeat-y, no-repeat;
    background-position: center top, center center, center bottom;
}
.footer {
    width: 100%;
    height: 100px;
    outline: 1px solid;
    background: #eee;
    position: absolute;
    bottom: 0;
}

DEMO HERE

【讨论】：