css - 如何制作三背景居中页面？

Question

我想构建一个看起来像这样的网页: http://i62.tinypic.com/2rm8inm.png

我想要三层背景:

1. 带有 repeat-x 的背景(红色)
2. 具有 repeat-y 的背景，居中并拉伸(stretch)整个高度，固定宽度(蓝色)
3. 一个不重复的背景，固定高度和宽度(绿色)

我尝试过许多不同的方法，但它们要么无法正确缩放，要么无法填满整个高度。 实现这一目标的最佳方法是什么？

谢谢!

Answer 1

这可能是解决问题的一种方法:

<div class="xrepeat">
     <div class="staticbg">
     </div>
</div>

然后给body做背景。当然，我选择了宽度和高度都乱七八糟的随机背景，但你应该明白了:

结果:

http://jsfiddle.net/YTnv8/1/embedded/result/

代码: http://jsfiddle.net/YTnv8/1/