JSFiddle

Question

我希望网站的网页顶部和底部都有重复的图片。

我能够在页面/正文/屏幕的顶部重复我的背景，但我无法让底部背景起作用。

对于底部，我试图让它沿x轴重复，类似于顶部，但如果内容没有填满窗口/屏幕，我希望图像绑定到屏幕的底部。如果内容大于窗口/屏幕，我希望页脚与内容绑定（关闭屏幕直到向下滚动才能看到它。）

当我尝试时，我只能让页脚显示在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;

    }

修改还要注意底部图像是如何被切断的。我希望页脚文本从底部开始大约150px，但我希望图像延伸到它的整个300px高度。不幸的是，这个div将其切断了。想法吗

Answer 1

JSFiddle

添加此课程。

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

CSS - 重复页眉/页脚图像 - 绑定到内容，但不在屏幕下方

1 个答案:

JSFiddle