我有一个带有页眉和页脚的 Bootstrap 网页，我想为它们之间的 div 设置背景图像。 我的目标是背景图像可以覆盖页眉和页脚之间的所有区域(下面代码中的 div id=xx)，而我不需要硬编码高度和宽度，但失败了。
你能帮忙吗？
<body>
<div id="wrap">
<div class="container">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
</div>
</div>
</div>
</nav>
<div class="container-fluid">
<center>
<div id="xx" style="background:url(images/background.jpg) no-repeat;background-size:940px 500px;height:500px;width:940px" title="KnowSG" align="left" id="hplogo">
<h3>"From beginning of 2016, it is mandatory that employers must issue payslip to employees."</h3>
<h3 style="color:red">"Penalty is SGD 1000 for first month and SGD 2000 for subsequent months."</h3>
</div>
</center>
</div>
</div>
<div id="push"></div>
</div>
<footer class="footer">
<div class="container">
<center>
</center>
</div>
</footer>
CSS
html, body {
height: 100%;
/* The html and body elements cannot have any padding or margin. */
}
/* Wrapper for page content to push down footer */
#wrap {
min-height: 100%;
height: auto !important;
height: 100%;
/* Negative indent footer by it's height */
margin: 0 auto -50px;
}
#push {height: 50px;}
.footer {
bottom: 0;
width: 100%;
height: 50px;
background-color: #f5f5f5;
padding-top: 15px;
}
.footer > .container {
padding-right: 15px;
padding-left: 15px;
}
最佳答案
好的，我稍微整理了一下您的代码。你在同一个元素上有 2 个你不应该做的 id 属性。我添加了一个类。
<div id="wrap">
<div class="container">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
</div>
</div>
</div>
</nav>
<div class="container-fluid">
<center>
<div id="xx" title="KnowSG" align="left">
<h3>"From beginning of 2016, it is mandatory that employers must issue payslip to employees."</h3>
<h3 style="color:red">"Penalty is SGD 1000 for first month and SGD 2000 for subsequent months."</h3>
</div>
</center>
</div>
</div>
<div id="push"></div>
</div>
<footer class="footer">
<div class="container">
<center>
</center>
</div>
</footer>
#xx {
background-image: url('http://placehold.it/1920x1080.gif');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
关于html - 如何为页面顶部和底部之间的div设置背景图像？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32292661/