在体内重复图像的CSS是什么

Question

我想实现this

我能够在容器中重复图像，但无法弄清楚如何以相等比例的div重复体内。

body {

}

div#container {
 width: 500px;

}

div#header {
width: 500px;
background: url(images/head.jpg) repeat-x;
}


div#content {
height: 500px;
width: 500px;
}


div#footer {
width: 500px;
background: url(images/footer.jpg) repeat-x;
}

Answer 1

如果我的问题是正确的，这应该是解决方案。你不应该

body {

    }


div#header-container{
  width:100%;
  background: url(images/head.jpg) repeat-x;
}


div#header {
width: 500px;
margin: 0 auto;
}


div#content {
height: 500px;
width: 500px;
margin:0 auto;
}

div#footer-container{
  width:100%;
  background: url(images/footer.jpg) repeat-x;
}

div#footer {
width: 500px;
margin:0 auto;
}

你的HTML应该是这样的：

<div id="header-container">
  <div id="header"></div>
</div>

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

<div id="footer-container">
  <div id="footer"></div>
</div>