コンテンツ画像上にスクロール

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

ではなく、背景画像としてのdivのイメージを設定し、それを与える：

background-attachment: fixed