固定背景不伸縮到整個窗口

我的網站上有一個固定的背景，根據瀏覽器窗口的大小，它應該伸展。但是，由於某種原因，在到達頁腳之前底部有一小塊白色條紋。固定背景不伸縮到整個窗口

也許我在CSS中如何去解決這個問題？

這裏是我的html：

<div class="clear" id='content'>  
    <br> 
    <br> 
    <br> 
     <?php 
      $section = $_GET["section"]; 
      if ($section == 'changePassword'){ 
       include "changePassword.php"; 
      }elseif ($section == "contactinfo"){ 
       include "contactInfo.php"; 
      }elseif ($section == "publicinfo"){ 
       include "publicInfo.php"; 
      }elseif ($section == "import"){ 
       include "import.php"; 
      }elseif ($section == "users"){ 
       include "viewUsers.php"; 
      }elseif ($section == "sales"){ 
       include "sales.php"; 
      }elseif ($section == "statements"){ 
       include "./statements.php"; 
      }elseif ($section == "books"){ 
       include "viewBooks.php"; 
      }elseif ($section == "specialists"){ 
       include "booking.php"; 
      }elseif ($section == "viewUser"){ 
       include "viewUser.php"; 
      }elseif ($section == "logAsUser"){ 
       include "loginAsUser.php"; 
      }else{ 
       include "account.php"; 
      } 
      //specialists 
     ?> 

<script type="text/javascript" src="main.js"></script> 
</div>

而CSS：

.clear { 
background: url('../assets/19.jpg') no-repeat fixed ; 
background-size:100% 100%; 
position: initial; 
background-repeat: repeat-x; 
background-repeat: repeat-y;

}

謝謝！

來源

2014-02-26 ejscribner

請添加js小提琴。 – steinmas

您的div不會等於瀏覽器高度，以使background-size屬性正常工作。收藏此CSS：

html, body, .clear { 
    height:100%; 
}

你必須與html和body選擇指定高度在一起。而且.cleardiv必須是BODY的直接子。否則解決方案將無法正常工作。您不必指定width:100%;作爲默認塊元素覆蓋寬度。

小提琴：http://jsfiddle.net/DGFnT/

來源

2014-02-26 19:20:42

太棒了！這樣在固定頁面和滾動頁面上應用不同的標記後解決了問題。謝謝！！ – ejscribner

您的.clear css正在添加背景大小，但您並未設置高度和寬度。

嘗試增加width:100%和height:100%您.clear CSS

來源

2014-02-26 19:09:27 steinmas

當我添加這些時，它將空間更改爲頁腳下方，而不是頁腳上方。是否還有一個簡單的解決方案？ – ejscribner

嘗試使用background-size: cover而非background-size:100% 100%。

來源

2014-02-26 19:13:30

與mozilla和webkit實現一起添加了此內容。謝謝！！ – ejscribner

我不知道爲什麼，但你沒有指定重複到。清除，但然後告訴它repeat-x和repeat-y ...無論如何，如果你希望有背景覆蓋整個視口確保你有高度：爲.clear容器100％，然後你可以使用背景大小：覆蓋像這樣：

.clear{ 
    height: 100%; 
    background: url('../assets/19.jpg') no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
}

希望這有助於:)

來源

2014-02-26 19:19:50

感謝您的提示！這絕對幫助我清理了我的CSS，但它沒有解決問題。 – ejscribner

固定背景不伸縮到整個窗口

回答

相關問題