2013-01-06 86 views
1

我想使一個網站使用視差。無法使背景圖像全屏

我遇到了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; 
} 

我的問題是,如果我不把高度明確,背景圖像不成爲全屏幕。

有什麼建議嗎?

+0

JsFiddle會幫我處理它。 – 2013-01-06 03:33:22

回答

1

對於要在任何元素上工作的百分比高度,它的父級必須設置某種高度。父母的身高也可以是一個百分比,但是,在那種情況下,爲了達到這個百分比,它自己的父母也必須設置某種高度。這一直到html元素。

在你的情況,如果#skrollr-bodybody元素的/直接孩子,你必須在你的樣式表包括此:「:封面背景」和skrollr

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

我已經有了:'#skrollr-body {width:100%;高度:100%;位置是:固定; } #skrollr-body div {width:100%;高度:100%;溢出:隱藏;位置:絕對的; }' – DarthVader

+0

也在'body'和'html'元素上呢? – banzomaikaka

+0

是' html, body { width:100%;高度:100%; }' – DarthVader

1

我已經使用了同樣的問題。

問題源於「遮蓋」指定圖像的大小(覆蓋元素),skrollr使用「背景位置」來抵消圖像...如果圖像只有包含它的元素,當它「滾動」時會留下空白。我寫了一些jquery來調整我的背景,使其相當於「封面+ 10%」。

如果任何人在我做之前完成此操作,我很樂意看到它!

~~更容易的選擇是確保圖像比寬度高得多。 (如果你是用skrollr垂直動畫的話)