如何在最大宽度内容div后面拉伸背景图像

Question

使主页内容（页眉，内容和页脚）仅延伸到最大长度时，无论视口拉伸到多大都有延伸以填充broswer窗口的页眉和页脚背景的正确方法是什么？比如http://moz.com

我尝试使用背景快捷方式，其中3个单独的图像位于并重复x但是有更好的方法吗？

Answer 1

阐述Stefan Dunn的评论，试试background-size: cover;

Answer 2

谢谢Josh，Stefan和Ty。不确定我将如何实现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;
}