拖动浏览器会导致背景图像与下一部分重叠

Question

我正在努力使页面比例或移动兼容我认为是这个词。我的页面现在的问题是它在某个大小上看起来不错，但是当我拖动浏览器时，我页面的背景图片覆盖了“服务”标题<section>部分。

这是jsFiddle：http://jsfiddle.net/eg18dfy0/4/不确定这是多么有用，因为这里没有包含本地文件。

正常：

拖动：

这是我的代码：

HTML片段事项：

<header>
  <div class="background_image">
  </div>
  <div class="welcome-text-container">
    <div class="row">
      <div class="welcome-text1">Welcome!</div>
      <div class="welcome-text2">BE GOOFY, TAKE A PICTURE!</div>
      <div class="btn-row">
        <a href="#services" class="welcome-btn btn-lg">TELL ME MORE</a>
      </div>
    </div>
  </div>
</header>

<!-- services -->
<section id="services">
  <div class="container">
    <div class="service-title">Services</div>
    <div class="service-caption">What we'll do for you</div>
  </div>
</section>

CSS：

.background_image {
    background-image: image-url("header-bg.jpg");
    background-size: contain;
    background-repeat: no-repeat;
    width: 100%;
    height: 0;
    padding-top: 66.64%; 
    position: absolute;
    /* (img-height / img-width * width) */
    /* (853 / 1280 * 100) */
}

/* Services */

#services {
    padding-top: 110px;
    margin-top: 75px;
}

.service-title {
    text-align: center;
    font-size: 55px;
    font-weight: 700;
}

.service-caption {
    text-align: center;
    font-size: 20px;
}

Answer 1

这可以解决您的问题：

Fiddle illustrating fix

您可以根据文档流程在div中设置更高堆叠优先级的背景图像，因此它会与后续div重叠。

这是我为解决问题而添加的CSS：

.container > div.background-image {
    z-index: 1;
}

.container > div {
    position: relative;
    z-index: 2;
}

有更好的方法可以做到这一点（即不为背景图像创建单独的div），但这将解决您的问题，而不会对文档结构进行重大更改。

占位符图片的所有信用均为http://placehold.it。如果您要在StackOverflow上解决CSS问题，那么它可以挽救生命。