HTML背景圖片將不會覆蓋整個高度

我需要我的容器div中的背景圖片來拉伸我的網站的整個長度。HTML背景圖片將不會覆蓋整個高度

但是，目前它在中途被切斷。寬度是完美的，我不能重複圖像，因爲圖像包含一些內容。

我也試過background-size:100%",height:100%，但它沒有幫助。

<body> 
<div id="container"> 
<div id="logo"> 
</div> 
<div id="navigation"> 

    <ul id="nav"> 

     <li><a href="/">Home</a></li> 
     <li><a href="#">About</a></li> 
     <li> 
      <a href="#">Recipes</a> 
     </li> 
     <li><a href="#">The Author</a></li> 
<li><a href="#">Contact Us</a></li> 
    </ul> 

</div> 


<div id="spoons"> 
</div> 
<div id="shbox"> 
<div id="main"> 
<div id="center"> 


<div id="gallery"> 


</div> 
</div> 
<div style="clear:both"></div> 

<div id ="aboutbox" class="shadow" > 
<p style="padding: 20px; text-align:center;">Lorem ipsum </p> 
</div> 
</div> 
</div> 
<div id="footer"> 
<ul> 
<li><a href="#">Home</a></li> 
<li><a href="#">The Author</a></li> 
<li><a href="#">Contact Us</a></li> 
</ul> 
</div> 
<div id="clear"> 
</div> 
</div> 

</body>

CSS

#container 
{ 
    margin: 0 auto; 


    background-image:url('backg.jpg'); 
    background-repeat:no-repeat; 
     position:relative; z-index:1; 
     width:990px; 

} 
#logo 
{ 
height:150px; 
} 
#navigation 
{ 
    height:40px; 
} 
#main{ 
     padding: 50px; 

} 
#nav{ 

      list-style:none; 
      margin:0; 
      padding:0; 
      text-align:center; 
      z-index:10; 

     } 

#gallery 
{ 
    width:860px; 
    height:400px; 
    background-color:#FFF; 
    float:left; 
    border-radius: 5px; 
    padding:10px; 

} 
#aboutbox 
{ 
    margin-top:30px; 
    width:880px; 
    background-color:#FFF;' 
    border-radius: 5px; 
    clear:both; 
} 
#clear 
{ 
    clear:both; 
} 
.shadow 
{ 
    -moz-box-shadow: 3px 3px 5px 6px #ccc; 
    -webkit-box-shadow: 3px 3px 5px 6px #ccc; 
    box-shadow:   3px 3px 5px 6px #ccc; 
} 

     #fronttext 
     { 

      color:white; 
      text-align:center; 

     } 

     #footer li{ 
      position:relative; 
      display:inline; 
      margin:0; 
      padding:0; 
     } 

     #footer a{ 
      display:inline-block; 
      padding:10px; 
      color:white; 
     }

來源

2012-09-15 S3cube

請出示完整的代碼與設定的最小高度和最小寬度 –

嘗試： http://css-tricks.com/perfect-full-page-background-image/ –

這裏是一個不錯的讀取後的CSS –

使用background-size:cover如下：

#your-container-div{ 
    background: url(your_image.jpg) no-repeat center center fixed; 
    background-size: cover; 
}

來源

2012-09-15 16:33:43

HTML背景圖片將不會覆蓋整個高度

回答

相關問題