Voll Seite Hintergrundbild mit vertikalem Bildlauf

Question

Ich versuche, eine Seite zu erstellen, wo das Hintergrundbild Ihres Browsers Bildschirmgröße reagiert. Ich benötige jedoch Inhalte unter diesem Bild, so dass das Hintergrundbild endet, wenn die Person nach unten scrollt.

Es ist schwer zu erklären, so habe ich versucht, ein Bild zu erzeugen, um es deutlicher zu machen:

Answer 1

Versuchen Sie, diese Fiddle:

HTML:

<div class='image'></div> 
<div class='content'>Content</div> 

Verwenden absolute Positionierung, um das Hintergrundbild die gleiche Größe wie der Bildschirm, und legen Sie den Inhalt nach, mit einem top von 100%:

body { 
    margin:0; 
} 
.image { 
    position:absolute; 
    width:100%; 
    height:100%; 
    background:green; 
    background-image:url('some-image.jpg'); 
    background-size:cover; 
} 
.content { 
    position:absolute; 
    width:100%; 
    top:100%; 
    height: 100px; 
} 

Answer 2

Es besteht keine Notwendigkeit für position: absolute als TB11 vermuten lässt.

Sie können einfach die Höhe des Ansichtsfenster stellen Sie die Höhe für die html, Körper und Bildelemente unter Verwendung von Darstellungseinheiten oder durch Einstellung.

Mit vh-Demo und support chart:

body { margin: 0; } 
.image { 
    width:100vw; 
    height: 100vh; 
    background: green; 
    background-image: url('some-image.jpg'); 
    background-size: cover; 
} 

---

Wenn Sie nicht vh verwenden können, müssen Sie die Höhe der HTML-und Körperelemente als auch gesetzt haben, so dass Sie verwenden können, Prozente - Demo:

html, body, .image { height: 100%; } 
body { margin: 0; } 
.image { 
    width:100%; 
    background: green; 
    background-image: url('some-image.jpg'); 
    background-size: cover; 
}