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

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

html css twitter-bootstrap

Html 如何在页面顶部和底部之间设置div的背景图像？,html,css,twitter-bootstrap,Html,Css,Twitter Bootstrap,我有一个带有页眉和页脚的引导网页，我想为中间的div设置一个背景图像。我的目标是，背景图像可以覆盖下面代码中页眉和页脚div id=xx之间的所有区域，而我不需要硬编码高度和宽度，但失败了你能帮忙吗 <body> <div id="wrap"> <div class="container"> <nav class="navbar navbar-default"> <div class="container-flui

我有一个带有页眉和页脚的引导网页，我想为中间的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>

好吧，我把你的代码清理了一点。在同一个元素上有两个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>

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

这可能是问题所在：请注意，如果您的示例中有一个外部样式表，您使用内联html属性设置了xx div的样式，并且如果该样式表位于子文件夹（如/css）中，则必须这样做，因为图像文件夹不在css文件夹的正下方：

background:url(../images/background.jpg) no-repeat; /* Note the ../ prefix */

我创建了一个JSFIDLE，并用占位符网站placekittens.com替换了您的硬编码图像，效果很好

意见：

如果希望背景图像与页眉和页脚齐平，则必须像我在JSFIDLE CSS顶部所做的那样进行以下调整：

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

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

.container-fluid h3 {margin:0;padding:50px;}

感谢您的评论并修复了我的错误，但我仍然看不到背景图像。还有什么建议吗？

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

.container-fluid h3 {margin:0;padding:50px;}