html - CSS - 重复页眉/页脚图像 - 绑定(bind)到内容，但不高于屏幕底部

Question

我想要一个在我网页的顶部和底部有重复图像的网站。

我可以让我的背景在页面/正文/屏幕的顶部重复，但我无法让底部背景正常工作。

对于底部，我试图让它像顶部一样沿 x 轴重复，但如果内容没有填满窗口/屏幕，我希望将图像绑定(bind)到底部屏幕。如果内容大于窗口/屏幕，我希望页脚与内容相关联(不在屏幕上，直到您向下滚动才能看到它。)

当我尝试时，我只能让页脚显示在一个 div 中，因此它不会重复到屏幕边缘，也不会显示在内容下方(仅在页脚 div 中)这正在成为噩梦!

这可能吗？

任何帮助将不胜感激!谢谢!

但我希望以下内容(页眉/内容和页脚文本等)居中且宽度固定。以下是我目前所掌握的内容。

http://jsfiddle.net/kuhfkhr4/

    html,
    body {
            margin:0;
            padding:0;
            height:100%;
        background-image: url("/images/backgrounds/light-top-small-2014.jpg");
        background-position: top center;
        background-repeat: repeat-x;
    }
    #wrapper {
            min-height:100%;
            position:relative;
    }
    #header {
            padding:10px;

    }
    #content {
            padding:10px;
            padding-bottom:180px;  
    }
    #footer {
        background-image: url("/images/backgrounds/light-bottom-small-2014.jpg");
        background-position: bottom center;
        background-repeat: repeat-x;
            width:100%;
            height:180px;
            position:absolute;
            bottom:0;
            left:0;

    }

编辑 还要注意底部图像是如何被截断的。我希望页脚文本从底部开始约 150 像素，但我希望图像能够扩展到原来的 300 像素高度。不幸的是，它所在的 div 将其切断。想法？

Answer 1

JSFiddle

添加这个类。

#header{text-align:center;}
#footer{text-align:center;}