Содержимое Прокрутка по изображению

Question

У меня есть изображение, которое не задано в качестве фона, но занимает всю ширину и почти всю высоту. Я хочу, чтобы это изображение оставалось в его положении, и по мере прокрутки пользователя содержимое ниже прокручивается поверх изображения.

Я попытался с помощью:

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

но ни или вместе работали.

То, что я без позиции или Z-индекс применяется: https://jsfiddle.net/hhcvmrfx/

Я хочу, чтобы контейнер DIV появляться под изображением и только перекрывают изображение, когда пользователь прокручивает.

Answer 1

Для перекрытия контейнера ниже только тогда, когда пользователь прокручивает вниз, вам необходимо установить набивку-верхнее значение, чтобы ваш родитель .container, равный или меньше высоты фиксированного изображения, о котором идет речь.
Затем примените свой цвет фона к вложенному элементу div.

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

Установить образ Див как фоновое изображение вместо и дать ему:

background-attachment: fixed