Question

我的html页面顶部有标题和菜单，菜单下有内容部分，底部有页脚。无论内容大小是什么，页脚都必须始终位于窗口的底部（除非内容高于窗口，否则页脚必须位于内容的下方）。我有标记和CSS规则来实现这个（下面）。

但我还需要在内容和页脚上显示背景图像。也就是说，图像必须覆盖整个屏幕，但标题/菜单区域。我不知道如何做到这一点。在我下面的代码中（以及http://jsfiddle.net/EGj54/上的jsfiddle）我已将背景附加到整个页面，但我希望它仅显示内容和页脚。

有人能帮帮我吗？

<div id="main">
    <div id="navbar">
        <div id="caption"><span>Test</span></div>
        <ul id="sections">
            <li><span>current</span></li>
            <li><a href="">next</a></li>
        </ul>
    </div>
    <div id="content">content</div>
    <div class="push"></div>
</div>
<div id="footer">footer</div>

* {
    margin: 0;
}
html, body {
    height: 100%;
}
ul {
    list-style-type: none;
}
ul li {
    display: inline;
}
#caption {
    font-weight: bold;
}
#footer, .push {
    color: white;
    height: 25px;
}
#sections {
    background-color: #aaaaaa;
}
#main {
    height: auto !important;
    margin: 0 auto -25px; /* bottom margin is negative value of #footer height */
    min-height: 100%;
}
#main {
    background-image: url('http://upload.wikimedia.org/wikipedia/commons/thumb/e/e0/Clouds_over_the_Atlantic_Ocean.jpg/800px-Clouds_over_the_Atlantic_Ocean.jpg');
    background-size: cover;
}

Answer 1

您可以设置图片的background-position

#main {
    background-image: url('yourimage.jpg');
    background-size: cover;

    background-position: 0 100px; // 100px or whatever the height of your navbar is
}

或者，你可以这样作弊;）

#content {
    height: 100px;
    background: url('yourimage.jpg') top;
}
#footer {
    height: 50px;
    background: url('yourimage.jpg') bottom;
}

Answer 2

您的页脚将保留在底部，因为您将其与div放在最后，只要您不使用float或绝对定位，就没有问题。将您的样式在后台移至body以解决您的问题：

body {
    background-image: url('http://upload.wikimedia.org/wikipedia/commons/thumb/e/e0/Clouds_over_the_Atlantic_Ocean.jpg/800px-Clouds_over_the_Atlantic_Ocean.jpg');
    background-size: cover;
}

Answer 3

你可以简单地调整背景图像的垂直位置吗？

background-position: left 20px;

页脚总是在底部;内容和页脚的背景图像

3 个答案: