html - 全宽背景图片 - 基础

Question

我希望我的网页的某些部分有一个背景图像，它可以覆盖整个页面，边缘没有空白。这可能吗？我正在使用 Foundation 5 框架。

html

  <div class="row"  id="wrapper">
    <div class="large-12  columns">
      <div class="kickstart"><img src="img/kick-start.png">
        <p class="getfit"><img src="img/get-fit.png"></p>
        <p class="home-text"> BodyMetrix Personal Training is a new company, based in South London, aiming to bring one-on-one training sessions and personalised exercise and nutrition plans. </p>
        <p class="get-contact"><img src="img/get-contact-btn.png"></p>
        </div>
        </div>
      </div>

CSS

#wrapper {
    background-image: url("../img/home-img.png");
    background-repeat: no-repeat;
    width: 100% !important;
    z-index: 0;


}
.kickstart {

    padding: 30px;
}
.getfit {
    padding-top: 10px;
}

.home-text {
    font-family: 'Open Sans', sans-serif;
    font-size: 1em;
    font-weight: normal;
    color: black;
}

Answer 1

有两种方法可以做到这一点。

您可以为 #wrapper 指定 100% 的宽度，或者将您的 HTML 更改为:

<div id="wrapper">
  <div class="row">
    <div class="large-12  columns">
      <div class="kickstart"><img src="img/kick-start.png">
        <p class="getfit"><img src="img/get-fit.png"></p>
        <p class="home-text"> BodyMetrix Personal Training is a new company, based in South London, aiming to bring one-on-one training sessions and personalised exercise and nutrition plans. </p>
        <p class="get-contact"><img src="img/get-contact-btn.png"></p>
      </div>
    </div>
  </div>
</div>

由于 div 是一个 block 元素，它默认采用 width:100%。只要它不在现有的 .row 类中，它就会是 100%。