モバイルに行くときにブートストラップバナーのサイズが変更されない

Question

私はブーストラップのウェブサイトを持っており、これは私のサイトのトップバナーです。基本的に、画面全体に100％の背景イメージがあります。私はテキストとボタンを左側に持っています。 - デスクトップではうまく見えますが、タブレットに行くと、画像の右手に人の顔を横切って移動します。 - 携帯では人物の顔が表示されません。

背景画像isn 'スケーリング。それをどうすればいいのですか？

タブレットのスクリーンショット：http://www.onvia.com/sites/default/files/tabelts-banner.jpg

モバイルスクリーンショット：http://www.onvia.com/sites/default/files/mobile-banner.jpg

Bootply： http://www.bootply.com/JeOg9KYYnY

HTML：

<div class="intro-header"> 
    <div class="container"> 

     <div class="row"> 
      <div class="col-lg-7"> 
       <div class="intro-message"> 
        <h1>Adobe Exchange</h1><br> 
        <p class="subtitle">Search the most comprehensive online library of video tutorials, code samples to help you quickly learn how to create the web.</p> 
        <p class="intro-divider"></p> 
        <a href="#register" class="btn btn-primary btn-lg"><span>Register for a Free Account</span></a> 

       </div> 
      </div> 
     </div> 

    </div> 
    <!-- /.container --> 

</div> 
<!-- /.intro-header --> 

CSS：

.intro-header { 
    padding-top: 50px; /* If you're making other pages, make sure there is 50px of padding to make sure the navbar doesn't overlap content! */ 
    padding-bottom: 50px; 
    text-align: left; 
    color: #f8f8f8; 
    background: url(http://www.onvia.com/sites/default/files/example-bg.jpg) no-repeat center center; 
    background-size: cover; 
} 

Answer 1

ここで問題となるのは、背景画像が中央に配置されているため、モバイルでは画像の中心部分のみが表示されます。これを行うには

可能な方法の1つは、モバイル/タブレットの画面サイズのメディアクエリを記述し、これは、背景画像を右揃えます

.intro-header { 
    background: url(URL-HERE) no-repeat center right; 
} 

に背景のプロパティを変更することです。

位置をもっと細かく制御したい場合は、おそらくバックグラウンドプロパティから離れて、他のトリックを使用する必要があります。背景画像を配置するためのいくつかの異なる方法について、このCSS-Tricksの記事を見てください。この記事では全面的な背景を取り上げていますが、あなたのケースで使用した方法を適用できるはずです。

https://css-tricks.com/perfect-full-page-background-image/

Answer 2

にそれを変更してみてください：それは携帯電話の画面で画像を小さくしてフィットさせるTwitter Bootstrap Responsive Background-Image inside Div