Question

我正在使用bootstrap来创建网页。我创建了一个页面，其中包含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;
                                }

Answer 1

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

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

 }

包含可能适合你div中的整个图像，但可能无法覆盖整个div。封面，可能不会显示部分图像，因为您覆盖整个div。另一种选择可能是background-size:100% 100%;

Answer 2

将背景网址放在引号中。

应为background: url('background.png');

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

2 个答案: