從頂部偏移背景圖像

我想要抵消用於我的聯繫人部分的背景圖像。我希望背景從該部分的頂部開始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

從頂部偏移背景圖像

回答

相關問題