如何制作三个背景居中的页面？

Question

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

我希望有三层背景：

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

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

谢谢！

Answer 1

这可能是解决问题的可能方法：

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

然后给身体背景。当然，我选择了宽度和高度混乱的随机背景，但你应该明白这个想法：

结果：

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

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