콘텐츠 스크롤 이미지

Question

그래서 배경으로 설정되지 않은 이미지가 있지만 전체 너비와 거의 모든 높이를 차지합니다. 이 이미지를 그 위치에 유지하고 사용자가 스크롤하면 아래의 내용이 이미지의 위쪽으로 스크롤됩니다.

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

하지만 둘 또는 함께 일 :

내가 사용했습니다. I는 위치 또는 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