在 div 中添加背景图像，在 div 和页脚之间没有空格答案

【问题标题】：Add background image in a div without empty space between div and footer在 div 中添加背景图像，在 div 和页脚之间没有空格
【发布时间】：2017-02-01 13:57:34
【问题描述】：

我正在使用引导程序创建网页。我创建了一个页面，其中包含 1 个水平导航栏、页眉，然后是正文内容的分区和左侧的垂直栏，然后是页脚。我想在背景中添加一个图像，但仅限于我创建的主体部分（col-lg-10）。哪个是最好的方法？我想要覆盖所有这个分区的图像，例如http://www.bootply.com/62096 问题是，我试图添加图像，但 div 和页脚之间有一个空白空间。

这是我的代码 - https://jsfiddle.net/clarissab/23kcck71/

我的 CSS 代码

html {
  position: relative;
  min-height: 100%;
}
body {
  margin-bottom: 120px;
}
#footer {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 60px;
  background-color: #E0E0E0;
}
#header {
  background-color: #4C6F85;
  height: 80px;
  text-align: center;
  background-size: cover;
}
.nav-custom a {
  background-color: #ffffff;
  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.25);
  -moz-box-shadow: 0 2px 15px rgba(0, 0, 0, 0.25);
  -webkit-box-shadow: 0 2px 15px rgba(0, 0, 0, 0.25);
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}

我的 HTML 代码

<body>

  <div class="container-fluid">
    <nav class="navbar navbar-default">

      <div class="navbar-header">
        <a class="navbar-brand" href="#">Name company</a>
      </div>

      <div id="navbar" class="navbar-collapse collapse">
        <ul class="nav navbar-nav navbar-right">

          <li><a href="#">Info</a></li>
          <li><a href="#">Address</a></li>
        </ul>
      </div>
    </nav>

    <div class="row">
      <div class="col-sm-8">
        <ul class="breadcrumb lighterbgcolor">
          <li class="location">HOME</li>
        </ul>
      </div>
    </div>


    <div id="header" class="col-lg-12">
      <h2><strong>Title</strong></h2>
    </div>


    <div id="sideLeft" class="col-lg-2">
      <ul class="nav nav-pills nav-custom nav-stacked">
        <BR>
        <BR>

        <li class="nav-link active"><a href="#">ABOUT</a></li>
        <li><a href="#">Team</a></li>
        <li><a href="#">Goals</a></li>
        <li><a href="#">Help</a></li>
      </ul>
    </div>


    <div id="body2" class="col-lg-10" style="padding-left:100px; padding-right:300px;">
      <BR>
      <h4 class="text-justify">blablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablabla</h4>
      <BR>
      <h4 class="text-justify">blaablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablabla</h4>
      <BR>
      <h4 class="text-justify">blablablablablablabla</h4>
      <BR>
      <h4 class="text-justify">blablablablablablabla</h4>
      <BR>

    </div>
  </div>


  <div id="footer" class="col-lg-12">

  </div>

</body>

我尝试在 CSS 中添加上面的代码，但直到页脚才覆盖所有 div。

#body2 { background-image: url('xx.jpg');
        background-repeat:no-repeat;
        background-size:79%;
        height: 740px;
                                }

【问题讨论】：

不好看，还是没用？您需要更具体地说明您的要求。
像这样？：jsfiddle.net/23kcck71/5
showing full background image in div tag in bootstrap的可能重复
@BenM 图片没有覆盖整个分区，所以我尝试增加高度，但分区和页脚分区之间仍然有空间。
@LGSon，是的，但是图像直到页脚才覆盖空间......

标签： html css image twitter-bootstrap

【解决方案1】：

您可以尝试使用 css 作为背景大小。首先定位你想要背景的div。示例：

 body{
   ...
   background-size: cover;
   */or/*
   backgroun-size: contain;
   background-repeat: no-repeat;

 }

contain 可能会在您的 div 中放置整个图像，但可能不会覆盖整个 div。封面，可能不会显示部分图像，因为您覆盖了整个 div。另一个选项可能是background-size:100% 100%;

【讨论】：

【解决方案2】：

将背景网址放在引号中。

应该是background: url('background.png');

【讨论】：

是的，我做到了，但没有覆盖所有的 div