バックグラウンドイメージが常に中心になるとは限りません

Question

私は最終プロジェクトのためにウェブサイトを作っていますが、今は最終的な作業に取り組んでいます。 私はそれをブートストラップを使って書き、グリッドを使用しました：.col-sm 今、私はすべての画面解像度で同じように見えるようにしています。

私は私のLG4を経由してサイトに入り、これは、ビューでした：

しかしときクロムモバイル解像度を使用して自分のPC上のビュー・サイトが、それは私が望むように、より似て表示されます。

これは、CSSです：

#index-wrap{ 
    background: url('pic/start.jpg') ; 

    margin-bottom: 0; 
    min-height: 50%; 
    background-repeat: no-repeat; 
    background-position: center center; 
    -webkit-background-size: cover; 
    background-size: cover; 

    /*now:*/ 
    background-attachment: fixed; 
} 

.jumbotron { 
    background-color: transparent; 
    color: #0E76BD; 
    text-align: center; 
    height: 100vh; 

} 

そして、これらはダイビングの階層です：

<div id="index-wrap"> 
    <div class="jumbotron"> 

-----Site Content ------ 

    </div> 
</div> 

どうしたらいいですか？

Answer 1

最後に、私は、画像をトリミングし、各デバイスに異なる画像を表示：

media(max-width:767px){ 

    #index-wrap{ 
     background: url('pic/start2.jpg') ; 
     margin-bottom: 0; 
     min-height: 50%; 
     background-repeat: no-repeat; 
     background-position: center center; 
     webkit-background-size: cover; 
     background-size: cover; 
    } 

    .vertical-center > .container { 
     max-width: 90%; 
     min-height: 80%; 
     display: inline-block; 
     vertical-align: middle; /* vertical alignment of the inline element */      
     font: 16px/1 "Helvetica Neue", Helvetica, Arial, sans-serif; 
    } 
} 

とデフォルトのビューで@

：

#index-wrap{ 
     background: url('pic/start.jpg') ; 
     margin-bottom: 0; 
     min-height: 50%; 
     background-repeat: no-repeat; 
     background-position: center center; 
    -webkit-background-size: cover; 
     background-size: cover; 
    } 

    .jumbotron { 
     background-color: transparent; 
     color: #0E76BD; 
     text-align: center; 
     height: 100vh; 
    } 

    .vertical-center { 
     width:100%; 
     min-height: 80%; 
     text-align: center; 
     font: 0/0 a;   
    } 

    .vertical-center:before { 
     content: " "; 
     display: inline-block; 
     vertical-align: middle; /* vertical alignment of the inline element */ 
     height: 100%; 
    } 

    .vertical-center > .container { 
     max-width: 100%; 
     min-height: 75%; 
     display: inline-block; 
     vertical-align: middle; 
     font: 16px/1 "Helvetica Neue", Helvetica, Arial, sans-serif; 
    } 

そして、これは、htmlの階層では、 ：

<div id="index-wrap" > 
    <div class="jumbotron vertical-center" > 
     <div class="container"> 
..... 
     </div> 
    </div> 
</div> 

それほどエレガントではありませんが、それはトリックです。 私はhereから解決策を取り、URLとコンテナの最大幅と高さを変更しました。

Answer 2

使用背景サイズ：

background-size: 100vw auto; 

のフォールバックとしてのカバー画像がビューポートユニット（サポートする任意のデバイス上に水平にクリップしないようにそれは、ビューポートの幅に背景幅を拡張しますデバイスの93％）。