Full page background image mit den vertikalen Bildlauf

Ich versuche eine Seite zu erstellen, wo das hintergrund Bild ist zu reagieren, um Ihre browser-Bildschirm Größe. Ich brauche allerdings Inhalt unter das Bild, so dass, wenn die person scrollt, das Hintergrundbild endet.

Es ist schwer zu erklären, also habe ich versucht, ein image zu erstellen um es klarer:

Full page background image mit den vertikalen Bildlauf

InformationsquelleAutor Erik Fischer | 2013-08-05
  1. 14

    Versuchen, diese Fiddle:

    HTML:

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

    Absolute Positionierung, um das Hintergrundbild die gleiche Größe wie der Bildschirm, und legen die Inhalte 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;
}
    • Jeder Weg, um die 'content' - Klasse außerhalb der 'Bild' - Klasse?
    • Sie können einfach zwei unterschiedliche div. erste <div class= "Bild" ></div> und dann <div class='content'>Inhalt</div>. Gleiche css für Sie arbeiten würde.
    • Das ist übertrieben. Es gibt keine Notwendigkeit für position:absolute nichts. Siehe meine Antwort
    InformationsquelleAutor tb11
  2. 1

    Gibt es keine Notwendigkeit für position: absolute als tb11 schlägt.

    Können Sie einfach legen Sie die Höhe des Viewports mit Viewports Einheiten oder durch die Einstellung der Höhe für das html -, body-und image-Elemente.

    Mit vh - Demo und support-Diagramm: 

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

    Wenn Sie nicht verwenden können vh haben, müssen Sie, um die Größe der html-und body-Elemente, so dass Sie verwenden können, Proz. - Demo: 

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