オフセット背景画像先頭から

Question

私は自分の連絡先セクションに使用している背景画像をオフセットしようとしています。バックグラウンドで、そのセクションの上から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マップの部分は反応しないようです。どのように私がそれを同様のものにすることができるか教えてください。

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>