如何在最大寬度的內容divs後面加上背景圖片

Question

無論視口拉伸到多大時，都可以使頁眉和頁腳背景伸展以填充瀏覽器窗口，正確的方式是使用主要內容（頁眉，內容和頁腳）只能延伸到一個最大長度像http://moz.com

我試過使用背景快捷方式與3個單獨的圖像定位和repeat-x，但有沒有更好的辦法？

Answer 1

在闡述斯特凡鄧恩的評論，嘗試background-size: cover;

Answer 2

由於喬希，斯特凡和Ty。不知道我將如何impliment background-size只需爲每個添加它並設置爲100％？

對於具有標準方法的佈局來說，下面的方法是一種麻煩的解決方法嗎？

<header> 
<div id="header-content"> 
....... 
</div> 
</header> 

<section> <!-- This is the main content area for each page --> 
<div id="main-page-content"> 
........ 
</div> 
</section> 

<footer> 
<div id="footer-content"> 
........ 
</div> 
</footer> 




header { 
width: 100% 
background: url(images/headerbg.png) center repeat-x; 
} 

#header-content { 
width: 80%; 
margin: 0 auto; 
padding: 30px; 
} 


section { 
width: 100% 
background: url(images/main-contentbg.png) center repeat-x; 
} 

#main-page-content { 
width: 80%; 
margin: 0 auto; 
padding: 30px; 
} 


footer { 
width: 100% 
background: url(images/footerbg.png) center repeat-x; 
} 

#footer-content { 
width: 80%; 
margin: 0 auto; 
padding: 30px; 
}