Inhalt Scrollt über Bild

Question

So habe ich ein Bild, das nicht als Hintergrund eingestellt ist, sondern nimmt die gesamte Breite und fast die gesamte Höhe. Ich möchte, dass dieses Bild in seiner Position bleibt und während der Benutzer scrollt, scrollt der Inhalt unten über den oberen Rand des Bildes.

Ich habe versucht, mit:

position: fixed; 
z-index: -1; /* Or another value */ 

aber weder oder zusammen gearbeitet.

Was ich ohne die Position oder z-Index angewandt: https://jsfiddle.net/hhcvmrfx/

ich die div Container unter dem Bild angezeigt werden soll, und überschneiden sich nur das Bild, wenn der Benutzer scrollt.

Answer 1

den Behälter unten nur zu überlappen, wenn der Benutzer nach unten scrollt, benötigen Sie einen padding-top Wert einzustellen, zu Ihr Elternteil .container, gleich oder kleiner als die Höhe des festen Bildes in Frage.
Dann wenden Sie stattdessen Ihre Hintergrundfarbe auf das verschachtelte Element div an.

body { 
 
    padding: 0; 
 
    margin: 0; 
 
    background-color: #f7f7f7; 
 
    overflow-x: hidden; 
 
} 
 

 
/* Images */ 
 
#head-banner-img { 
 
    border-bottom: 5px solid #222222; 
 
    position: fixed; 
 
} 
 

 
/* Container Content */ 
 
.container { 
 
    width: 100%; 
 
    height: 500px; 
 
    background-color: transparent; 
 
    padding-top: 947px; 
 
    font-size: 30px; 
 
    text-align: center; 
 
    position: relative; 
 
} 
 

 
.container > div { 
 
    background: #2c2c2c; 
 
    height: 100%; 
 
    padding: 50px; 
 
    box-sizing: border-box; 
 
    color: white; 
 
}

<img src="http://www.thestoryboardz.com/images/background.jpg" alt="Munch Banner" id="head-banner-img"> 
 
    <div class="container"> 
 
     <div>Hello</div> 
 
    </div>

Answer 2

die div das Bild als Hintergrundbild einstellen, statt und es geben:

background-attachment: fixed