Wie kann ich die Hintergrundhöhe in CSS dynamisch ändern?

Question

Ich versuche, meine Hintergrundhöhe in CSS dynamisch zu ändern. Ich habe einen Hintergrund, der beim Scrollen nach unten bleibt. Wenn ich also ein größeres Browserfenster verwende, möchte ich meinen Hintergrund vergrößern, damit keine Lücke darunter ist. Meine CSS ist:

body { 
    min-width: 100%; 
    background-image: url("Photos/Tiger-4.jpg"); 
    background-position: 0px 0px; 
    background-size: 100%; 
    background-attachment: fixed; 
    background-repeat: no-repeat; 
} 

How it should look [Img]

What it looks like in a tall browser [Img]

In diesem zweiten Bild sieht man, dass es eine weiße Lücke unter dem Hintergrund ist. Ich möchte, dass das Bild stattdessen vergrößert wird, damit es auf den Telefonen gut aussieht. Also möchte ich die Hintergrundhöhe die gleiche wie die Fensterhöhe und die Breite ändern, um es nicht zu dehnen.

Ich habe versucht:

background-size: auto 100%; 

Dies ist nur der Hintergrund dummerweise groß gemacht.

Jede Hilfe ist willkommen :)

Answer 1

Here ist eine Demo von etwas Ähnlichem. Wenn Sie vh (Höhe anzeigen) und cover auf der Hintergrundgröße einstellen, sollte das Problem behoben sein. Die article geht ein wenig mehr in die Tiefe.

div { 
    background-repeat: no-repeat; 
    background-position: center center; 
    background-size: cover; 
    background-attachment: fixed; 
    height: 90vh; // or whatever size you want it to be 
} 

Answer 2

Sie vh meassure verwenden können, wie folgt aus:

div{height: 100vh; 
 
background-image: url("http://e03-elmundo.uecdn.es/assets/multimedia/imagenes/2015/11/13/14474300157302.jpg") 
 
}

<div> 
 
<p> 
 
My text 
 
</p> 
 
</div>

aber dies ist nur nur ein Weg. Wenn dies nicht zu Ihnen passt, können Sie die body und html als gewünschte Tag height bis 100% setzen und Sie werden einen ähnlichen Effekt erhalten.

Eine andere mögliche Option ist die Verwendung von JS, um die Bildschirmhöhe zu finden und dann die gewünschte Größe in Ihrem Tag festzulegen.

Answer 3

Sie können eine aspect-ratio in Ihrer @media Abfragen verwenden und die background-position nach Bedarf ändern.

body { 
 
    background: url('http://elelur.com/data_images/mammals/tiger/tiger-06.jpg') 0 0 no-repeat; 
 
    background-size: 100%; 
 
} 
 
@media (min-aspect-ratio: 3/1) { 
 
    body { 
 
    background-position: center 20%; 
 
    } 
 
}