Question

我有一个带页眉和页脚的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;
}

Answer 1

好的，我稍微清理了你的代码。您在同一元素上有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;
}

Answer 2

您的背景图片可能不在您认为或缺失的位置吗？快速测试：在新的浏览器窗口中：http://yourdomain.com/images/background.jpg （使用问题代码中的文件/目录名称）

这可能是问题： 另请注意如果您有外部样式表（在您的示例中，您设置了样式{ {1}} div使用内联html属性），以及那个样式表位于子文件夹中，例如#xx，你必须这样做（因为images文件夹不是直接在css文件夹下面）：

/css

我创建了一个jsFiddle并用占位符网站background:url(../images/background.jpg) no-repeat; /* Note the ../ prefix */替换了您的硬编码图像 - 它运行正常。

jsFiddle Demo

观察：

如果你想让背景图像冲到页眉和页脚，你必须进行这些调整（正如我在jsFiddle的CSS顶部所做的那样）：

placekittens.com

如果您希望bg图像与标题冲洗而不是文本，则可以执行此：

.container-fluid h3 {margin:0;}
.navbar {margin:0;}

如何在页面的顶部和底部之间设置div的背景图像？

2 个答案: