Question

我正在开发一个新网站，使用body向background: cover课程添加全屏图片。

它运行良好，但我想改变它，因为一些背景图像被页眉和页脚隐藏。我想增加一个上边距，但这不起作用。

Answer 1

您必须将背景从<body>移至<div id="section-content">

Answer 2

一种可能的解决方案是将background-image添加到包含您内容的<div> / <section> / <main>。

当然，如果你这样做，你必须确保：

或者，如果您知道<header>的高度，您也可以定位background-image：

header {
    height:100px;
}
body {
    background-repeat: no-repeat;
    background-position: center 100px;
}

Answer 3

您可以将背景封面图像移动到#section-content div，但这只会阻止标题重叠。

你的.sixteen类的高度设置为100％，在你的情况下总是强制它在页脚下。

布局需要重新考虑一下。

根据我的经验，当使用像这样的可调大小的盒子和背景图像时，我最终使用jQuery来动态调整div的大小。