배경 이미지를 전체 화면으로 만들 수 없습니다.

Question

나는 시차를 사용하여 웹 사이트를 만들려고합니다.

CSS에 문제가 있습니다. 아래는 HTML입니다 :

<div id="skrollr-body"> 

     <div class="subnav"> 
      <ul id="nav"> 
       <li><a href="#home">Home</a></li> 
       <li><a href="#foo">Foo</a></li> 

      </ul> 
     </div> 


      <div id="home" class="centered" data-0="height:100%;" data-1000="height:0%;" > 
       <div class="zebra"> 
        <div class="contentWrap"> 

          test 

        </div>   
       </div> 
      </div> 


      <div id="foo" class="centered" data-1000="height:100%;" data-2000="height:0%;"> 
       <div class="world"> 
         <div class="contentWrap"> 

           test 

         </div>   
       </div> 

      </div> 
</div> 

여기에 CSS입니다 :

#home { 
    background: #dedede; 
    height: 100%; 
    z-index: 901; 
} 
#foo{background: yellow; z-index:800;} 

.zebra { 
    background-image: url("/img/zebra-pattern.png"); 
    background-position: center center; 
    background-repeat: repeat-x; 
    background-size: cover; 
    height: 100%; 
    position: relative; 
    width: 100%; 
} 

.world { 
    background-image: url("/img/world.jpg"); 
    background-position: center center; 
    background-repeat: repeat-x; 
    background-size: cover; 
    height: 100%; 
    position: relative; 
    width: 100%; 
} 

.contentWrap{ 
    position: absolute; 
    border: 1px solid red; 
} 

내 문제는 내가 명시 적으로 높이를 넣어 해달라고 경우, 배경 이미지가 전체 화면되고 있지이다.

어떤 조언이 필요합니까?

Answer 1

모든 요소에서 높이가 작동하려면 상위 요소에 높이가 설정되어 있어야합니다. 그 부모의 키는 백분율 일 수도 있지만, 그 경우에는 그 백분율이 작동하려면 부모도 키의 종류를 설정해야합니다. 그리고 이것은 html 요소까지 계속됩니다. 귀하의 경우에는

, #skrollr-body이 body 요소의/직접적인 아이 인 경우, 당신은 당신의 스타일이 포함되어야합니다 "커버 배경"과 skrollr을

html, 
body, 
#skrollr-body { 
    height: 100%; 
} 

Answer 2

나는 사용하여 동일한 문제가 있었다 .

"커버"는 이미지의 크기를 지정하고 skrollr은 "배경 위치"를 사용하여 이미지를 오프셋합니다. 이미지가 그것을 포함하는 요소, 'skrolls'때 그것은 빈 공간을 남길 것입니다. 내 배경 크기를 "표지 + 10 %"와 같도록 jquery로 작성하고 있습니다.

누구나 내가 이것을하기 전에 끝내면, 나는 그것을보고 싶습니다!

~ ~ 훨씬 쉬운 옵션은 이미지가 너비보다 훨씬 큰지 확인하는 것입니다. (skrollr로 수직으로 애니메이션을 적용하는 경우)