html - 从顶部偏移背景图像

Question

我正在尝试偏移用于联系部分的背景图像。我希望背景从该部分顶部开始大约 20 像素，以便某些内容出现在内容上方。

这是我该部分的代码:

<section id="contact">
        <div class="container">
            <div class="row">
                <h3 class="section-header wow fadeInUp" style="display: inline-block;">Contact Us</h3>
            </div>
            <div class="row" style="padding-top: 20px;">
                <!-- <div id="google-map" style="height:300px;" data-latitude="10.943816" data-longitude="76.934372"></div> -->
                <div id="map" style="height:300px;"></div>
                <script>

                </script>
            </div>
        </div>
    </section>

我的该部分的 CSS :

#contact {
    text-align: center;
    padding-bottom: 10px;
    background-image: url('../images/slider/bg1.jpg');
}

我实际上正在尝试实现像 here 这样的联系部分

但我只能做this到目前为止。

请帮助我实现这一目标。

此外，Google map 部分似乎没有响应。请让我知道如何使其具有响应性。

Answer 1

使用background-position来定位图像

在您的情况下，您想将其垂直放置，因此需要使用background-position-y

#contact {
  text-align: center;
  padding-bottom: 10px;
  background-image: url('https://www.w3schools.com/css/img_fjords.jpg');
  background-position-y: 50px;
  background-repeat: no-repeat;
  background-size: 100%;
}

<section id="contact">
  <div class="container">
    <div class="row">
      <h3 class="section-header wow fadeInUp" style="display: inline-block;">Contact Us</h3>
    </div>
    <div class="row" style="padding-top: 20px;">
      <!-- <div id="google-map" style="height:300px;" data-latitude="10.943816" data-longitude="76.934372"></div> -->
      <div id="map" style="height:300px;"></div>
      <script>
      </script>
    </div>
  </div>
</section>