頁眉和頁腳之間的背景圖像

我正在製作頁面，其佈局分爲3個部分：頁眉，主體和頁腳。我想在我的主體中使用背景圖像。現在當我嘗試這樣做時，我遇到了一個問題。圖像不覆蓋整個區域。它在底部留下一些區域。請檢查此fiddle以獲得正確的解釋。頁眉和頁腳之間的背景圖像

這是我迄今所做的：

HTML

<html> 
    <head> 
     <title>Gehri Route: Login, Signup</title> 
    </head> 
    <body> 
      <div class='headercontainer'> 
         <div class='header'> 
          header 
         </div> 
      </div> 
      <div class='mainbodycontainer'> 
        </div> 
      <div class = 'footercontainer'> 

         <div class='footer'> 
           footer 
         </div> 
      </div> 
     </body> 
</html>

CSS

body 
{ 
    background-color: rgb(250,250,250); 
    margin: 0; 
    padding: 0; 
} 

.headercontainer 
{ 
    background-color: rgb(245,245,245); 
    min-width: 999px; 
    height:60px; 
    border:1px solid #666; 
    left: 0; 
} 

.mainbodycontainer 
{ 
    margin: 0 auto; 
    overflow: auto; 
    background-color: rgb(250,250,250); 
    min-width: 999px; 
    padding: 80px 0; 
     background: url("http://images.nationalgeographic.com/wpf/media-live/photos/000/107/cache/california-profile_10719_600x450.jpg?01AD=3Eg20HvemHwApI8-INwZvViX_nk9hW8HJTh_oBQchW4pJwAzYLvxz9w&01RI=A8733DF327AC3E9&01NA=na") no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
} 


.footercontainer 
{ 
    background-color: rgb(245,245,245); 
    width: 100%; 
    height:82px; 
    border: 1px solid #666; 
    left:0; 
    position: fixed; 
    bottom: 0; 
} 

.header 
{ 
     margin: 0px auto; 
     width: 999px; 
} 



.mainbody 
{ 
    margin: 0px auto; 
    width: 999px; 
}

還請大家幫我做這個響應式設計。

來源

2013-07-19 user1263375

也許你想要一些新奇特的HTML5元素，如'

'或''

您需要強制身體和html標記的高度爲100％。如果沒有內容，背景將不會出現，因爲元素的高度（.mainbodycontainer）是0.在你的情況下，它是80px，因爲你應用了填充。

檢查這個小提琴。 http://jsfiddle.net/olwez/ncLZN/

我向.mainbodycontainer div的body和html標記添加了100％的高度和100％的最小高度。這樣，您就不必手動設置高度，也不必在.mainbodycontainer中爲圖像設置內容以符合您的需求。

我剛投擲出一個溢出：hidden;在身體標籤上，以便滾動消失。

這裏是完整的CSS。

html { height: 100% } 
body 
{ 
    background-color: rgb(250,250,250); 
    margin: 0; 
    padding: 0; 
    height: 100%; 
    overflow: hidden; 
} 

.headercontainer 
{ 
    background-color: rgb(245,245,245); 
    min-width: 999px; 
    height:60px; 
    border:1px solid #666; 
    left: 0; 
} 

.mainbodycontainer 
{ 
    margin: 0 auto; 
    overflow: auto; 
    background-color: rgb(250,250,250); 
    min-width: 999px; 
    min-height: 100%; 
     background: url("http://images.nationalgeographic.com/wpf/media-live/photos/000/107/cache/california-profile_10719_600x450.jpg?01AD=3Eg20HvemHwApI8-INwZvViX_nk9hW8HJTh_oBQchW4pJwAzYLvxz9w&01RI=A8733DF327AC3E9&01NA=na") no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
} 


.footercontainer 
{ 
    background-color: rgb(245,245,245); 
    width: 100%; 
    height:82px; 
    border: 1px solid #666; 
    left:0; 
    position: fixed; 
    bottom: 0; 
} 

.header 
{ 
     margin: 0px auto; 
     width: 999px; 
} 



.mainbody 
{ 
    margin: 0px auto; 
    width: 999px; 
}

來源

2013-07-19 17:03:20

+1找到溢出的東西。我正在尋找滾動的原因。 – user1263375

我在我的ipad上試過這個，但它給我垂直滾動，我不想要。如何刪除垂直滾動？ – user1263375

你有一個最小寬度集合和一些其他寬度，如999px的定義值。它可能會將它轉換爲景觀可能是一個問題。嘗試將它們更改爲％100或％。很難讓我現在進行測試。 –

添加到您的風格：

width:600px; 
    height:450px; 


.mainbodycontainer 
{ 
    margin: 0 auto; 
    overflow: auto; 
    background-color: rgb(250,250,250); 
    min-width: 999px; 
    padding: 80px 0; 
    background: url("http://images.nationalgeographic.com/wpf/media-live/photos/000/107/cache/california-profile_10719_600x450.jpg?01AD=3Eg20HvemHwApI8-INwZvViX_nk9hW8HJTh_oBQchW4pJwAzYLvxz9w&01RI=A8733DF327AC3E9&01NA=na") no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    width:600px; 
    height:450px;

}

http://jsfiddle.net/QcUfm/9/

來源

2013-07-19 16:54:58 Keith

一個HIGHT是不是一個好主意，如果他想添加更多的東西，再更換你oldsql'div's比450px，它不會工作。 @olwez說使用％更好。 – AliBZ

背景圖像將只顯示儘可能多的或者由內容或高度顯露出來。如果你的div沒有足夠的內容來強制父元素足夠大，你就不會看到這一切。此外，如果您正在使用任何類型的定位，如固定，絕對或相對移動它，也會影響它。我沒有看小提琴，但這些都是一些常見問題。

來源

2013-07-19 16:57:04