从顶部偏移背景图像

我想要抵消用于我的联系人部分的背景图像。我希望背景从该部分的顶部开始20px左右，以便某些内容显示在内容上方。从顶部偏移背景图像

这是我该部分代码：

<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地图部分似乎没有响应。请让我知道我怎样才能让它恢复原状。

来源

2017-05-07 v1shnu

使用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>

来源

2017-05-07 07:27:36 Chiller

谢谢！这工作。但是当它响应时，偏移高度会不断变化。这是预期的行为，还是我可以在所有屏幕宽度上保持不变？ – v1shnu

@ v1shnu如果你像我一样使用像素，偏移量不会变化......对于所有屏幕尺寸，它仍然保持在50px ..你可以测试我制作的例子并看到:) – Chiller

是的。有用。谢谢你哦:) – v1shnu

从顶部偏移背景图像

回答

相关问题