空白背景画像は、私は私のウェブサイトのためのブートストラップ、HTMLとCSSを使用しています

Question

を終了します。私は私のMacBook Proの上に構築された、と私は（はるかに大きい）私のデスクトップモニタに移動したときに、今、モニターの幅がはるかに大きいことに起因するウェブページの右側に大きな空白があるように思われます。

高さは完全にうまく機能していますが、画像が終了するとき（幅）、サイトが続行したいときは右のように見えますが、大きなモニターを水平（幅）に合わせて伸ばしていません。

どうすればこの問題を解決できますか？ウェブサイトの問題の

画像：

これは私がこれまでに思い付いたものです。

body { 
    background-image: url("http://i.imgur.com/vDF3k2s.jpg"); 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    background-repeat: no-repeat; 
    width: 100%; 
    overflow: auto; 
    font-family: Lato; 
} 

html { 
    height: 100%; 
} 

感謝の意を表します。あなたのHTMLコードなし

Answer 1

、私は正確にあなたが何をしているかを複製することはできませんので、私はいくつかのことを前提とする必要があります...いつも危ないです！笑！

とにかく、私は先に進んでいることを教えてくれるでしょうし、それを解決するためのいくつかのことを説明し、あなたがすでに提供したコードに基づいて実際のコードを提供します。

私は、身体のどこに背景画像が必要なのかを指定していないので、デフォルトでブラウザは元のサイズの100％でイメージを与えて、左に浮かべています。

私はあなたが撮影していると考えているものですフルスクリーン画像を得るために、私が最初に「HTML」タグの代わりに「身体」タグ内に背景画像を配置します。第二に、私はブラウザに、イメージを中央に置いて繰り返しないようにすることを知らせます。それから私はあなたにイメージを「スクリーンを覆う」ようにブラウザに指示します。

だから、ということで、ここで私はちょうど説明何のためのコードは次のとおりです。

html { 
    background: url("http://i.imgur.com/vDF3k2s.jpg")no-repeat center; 
    background-size: cover; 
    overflow: auto; 
} 

私は-webkit、-moz、コードの部分などを削除したことを説明する必要があります。これは、「オーバーフロー」が最も一般的に使用されているブラウザの古いバージョンと互換性があるため、コードに記述する必要がないためです。

はまた、私はページ上のフルスクリーンの背景画像を作成していたとき、私は通常の代わりに、「背景画像」の「背景」を使用して、私は「隠された」として、「オーバーフロー」を持っています。

など、それは「ベストプラクティス」または「自動」としてあなたの文章「オーバーフロー」の場合であれば、私は正直にあなたを伝えることはできませんが、私はまた、あなたが場所に置くことを計画、他のどのようなコンテンツを知りません

とにかく、私の解決策が助けてくれることを願っています。