CSSの背景イメージ、ビューポートに基づいてサイズ変更

Question

私はbackground-size：coverセレクタがヘッダに適用されたセクションに背景イメージを持つ既存のブートストラップテーマから1ページャーを作っています。

現在のところ、画像はほとんどのブラウザでは画面の約80〜90％しかカバーしていません。下の部分は白い背景で満たされています。下のセクションのものです。あなたが最初にページを読み込むときに、画像が垂直ビュー全体を占めるようにしたいと思います。

ピクセル単位で高さを手動で編集して、特定のモニタ/ブラウザで動作させることはできますが、ブラウザ、マシンなどのビューの高さに基づいて動的にサイズを変更する方法はありますか？あるいは、私はこの「空白」問題についています。このPC上のChromeで

例： https://i.stack.imgur.com/yqMHp.jpg

Answer 1

はそれをheight:100vh;

html,body{ 
 
    width:100%; 
 
    height:100%; 
 
    margin:0; 
 
    padding:0: 
 
} 
 
.imageH{ 
 
    width:100%; 
 
    margin:0; 
 
    padding:0; 
 
    background-image:url("http://images.financialexpress.com/2015/12/Lead-image.jpg"); 
 
    background-size:cover; 
 
    background-position:center; 
 
    height:100vh; 
 
}

<div class="imageH"></div>

を与え、これは、高さは50pxの言うDIV前に、ナビゲーションバーを持っているならば、calc(100vh - 50px)

を使用

html,body{ 
 
    width:100%; 
 
    height:100%; 
 
    margin:0; 
 
    padding:0: 
 
} 
 
.navbar{ 
 
    width:100%; 
 
    margin:0; 
 
    padding:0; 
 
    background-color:green; 
 
    height:50px; 
 
} 
 
.imageH{ 
 
    width:100%; 
 
    margin:0; 
 
    padding:0; 
 
    background-image:url("http://images.financialexpress.com/2015/12/Lead-image.jpg"); 
 
    background-size:cover; 
 
    background-position:center; 
 
    height:calc(100vh - 50px); 
 
}

<div class="navbar">navbar comes here</div> 
 
<div class="imageH"></div>

Answer 2

ハイテクだけでは、一例として、この問題が原因あなたの背景に発生している https://blackrockdigital.github.io/startbootstrap-the-big-picture/

おかげ

Answer 3

これを見ることができ、このコードに

body{background: url(images/bg.jpg) no-repeat center center fixed; 
     -webkit-background-size: cover; 
     -moz-background-size: cover; 
      -o-background-size: cover; 
      background-size: cover;} 

を与えるsize.youあなたの背景イメージのサイズを調整する必要があります。 background-size:cover;またはこれを使用してくださいbackground-size:100% 100%; これはbotoomで背景画像にあるすべての空白を埋めるでしょう。