モバイルの背景画像がテキストと揃っていない

Question

私はデスクトップ上で見た目がよく、テキストがモバイル上で正しく整列されていません。画像の背景は、上に余白/余白があり、段落テキストの後ろに押し下げられているようです。 あなたがここにWebページを見ることができます：ここhttp://cuttingedgeconversions.com/ebook/

は、Webページのコードです：

<header class="mobileBackground masthead"> 
    <div class="intro-body"> 
     <div class="container"> 
      <div class="row"> 
       <div class="col-lg-8 mx-auto"> 
        <h1 style="font-size:50px" class="brand-heading">Free eBook: "How to Date in the Marriage Zone"</h1> 
        <!--<p class="intro-text marginP"> 
         Learn The 5 Essential Keys to Attracting the Love</i> 
        </p>--> 
        <!--<a href="#about" class="btn btn-circle js-scroll-trigger"> 
         <i class="fa fa-angle-double-down animated"></i> 
        </a>--> 
       </div> 
       <br /><br /><br /> 
       <div style="width: 100%"> 

        <span style="font-family: Arial; font-size: 26px; font-style: italic">What if you could wake up every single day next to the man of your dreams?<br /> 
        A man that supported you?<br /> 
        Where you didn’t need to choose between your needs and his needs?<br /> 
        Where you could love without fear? You felt safe, confident, and secure from 
        the very beginning of the relationship?<br /> 
        </span> 
        <img height="400" width="300" src="e-book.png" /> 
       </div> 
       <a style="color: #ffffff;margin: 0 auto; margin-top: 20px; margin-bottom: 20px; font-size: 18px" href="#" class="myButton btn btn-default">I am ready for love<br />Register for FREE Webinar</a> 
       <br /><br /> 
      </div> 
     </div> 
    </div> 
</header> 

Answer 1

あなたの問題は、あなたのメディアquerie内のCSSから来ています。あなたのファイルで は、あなたがこれを持ってgrayscale.css：

.mobileBackground { 
    background: url(../img/intro-bg-small.jpg) repeat-y bottom center scroll; 
    margin-top: 25%; 
} 

だから、これは動作セットをそれ。これを変更したい場合は、適切なメディアクエリを設定し、前のコードを上書きする必要があります。

例、414pxからのすべての画面用と下：

@media and (max-width: 414px) { 
    .mobileBackground { 
    background: url(../img/intro-bg-small.jpg) repeat-y bottom center scroll; 
    margin-top: 0; 
    background-size: contain; /* Set cover or contain and choose the behavior you want*/ 
    } 
} 

私はあなたがイメージを持っているパディングの問題を修正する必要があり、私の例で追加した背景-sizeプロパティ。

乾杯。