0

我的 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;
}
4

3 回答 3

0

您可以设置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;
}
于 2013-02-18T07:25:57.307 回答
0

自从您将页脚与 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;
}
于 2013-02-18T07:27:48.787 回答
0

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

background-position: left 20px;
于 2013-02-18T07:27:54.843 回答