バックグラウンドイメージの背景を作成する

Question

これはよくある質問ですが、私が見ている既存の回答は私にとってはうまくいかないようです。私はそれよりもはるかに背の高い背景イメージを持っています。高さをbodyの高さの100％にしたいと思います。

body, html { 
    height: 100%; 
    min-height: 100%; 
} 

body { 
    background:url("NewLogo.png") no-repeat center center; 
    background-size: 100% auto; 
} 

は私もbackground-size: cover;を変更しようとしたが、これはまた、単に大きな画像になりますが、上下をカットする：これまでのところ私は試してみました。

Answer 1

containを使用してください。

body { 
    background:url("NewLogo.png") no-repeat center center; 
    background-size: contain; 
} 

Answer 2

あなただけの大せずにカバーされ、それ自身の高さを（持っている背景画像を設定しなければなりませんのでご注意ください。これは、画像全体がコンテナに表示され、何が遮断されていないことを保証します、あなたのブラウザと同じくらい幅広いが、あなたが言ったように最上部の&の底を失う）、あなたはあなたの背景イメージに適切な高さをvhで与えることができます。

body { 
 
     margin: 0; 
 
    } 
 

 
#image { 
 
    background-image: url(https://images.unsplash.com/photo-1504387103978-e4ee71416c38?auto=format&fit=crop&w=2134&q=60&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D); 
 
    background-repeat: no-repeat; 
 
    height: 293vh; 
 
    background-size: cover; 
 
}

<div id="image"> 
 
</div>

そうでなければあなたは自分の背景画像カバーを作りたい、またはあなたがしたい場合は、それは（あなたのイメージが広いブラウザが収まらないけれども、それはそれでだろうが本物だ含有させる場合には高さ）、次のリンクにアクセスできます。 codepen>background-size>CSS-Tricks