如何製作一個三背景居中的頁面？

Question

我想建一個網頁，看起來有點像這樣： http://i62.tinypic.com/2rm8inm.png

我想有背景的三個層次：

1. 後臺與重複-X（紅色）
2. 一背景重複-y，居中並伸展整個高度，固定寬度（藍色）
3. 背景不重複，固定高度和寬度（綠色）

我嘗試了很多不同的方法，但它們要麼不能正確縮放，要麼不會填滿整個高度。 達成此目的的最佳方法是什麼？

謝謝！

Answer 1

這可能是一個可能的解決問題的方法：

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

然後給身體的背景。當然，我拿起其中，寬度和高度都搞砸了隨機背景，但你應該得到的想法：

結果：

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

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