浮在另一背景圖像

我有一個背景圖像，我想在我的頁面的頂部，這個形象是寬800像素，高400像素。

在這張圖片下，我想要另一個背景圖片，它會爲頁面的其餘部分重複垂直（repeat-y）。

我曾嘗試以下

<div id="bg-static"> 
<div id="bg-repeat-y"> 
    <div> 
    Text goes here 
    </div> 
</div> 
</div>

的事情是，我想「文雲在這裏」這兩個元素漂浮在。（見圖片http://img219.imageshack.us/f/skrmavbild20110321kl160.png/）

我該怎麼做？

2011-03-21 Fredrik

我認爲解決方案將是相反的方式：在外部div和內部div固定高度的背景有重複的背景。

上的jsfiddle一些代碼：http://jsfiddle.net/EBK4C/

2011-03-21 17:53:50

哈哈，爲什麼我沒有想到這一點。這麼簡單的修復。但它像一個魅力！謝謝！ – Fredrik 2011-03-21 19:25:12

您正在這個看起來很複雜，但它是非常容易。這就是你需要做什麼：

你的「無限重複」圖像會作爲一個網站的背景下，這樣的：

body{ background: url("your-repeated-image.png"); }

接下來，創建這樣一個html：

<body> 
    <div id="container"> 
     any content, text, whatever goes here 
    </div> 
</body>

，只是把你的800x400px圖像有這樣的：

#container{ width: 800px; background: url("your-top-image.png") no-repeat; }

雖然測試它，暫時使用這個：

#container{ height: 600px; } /* erase after the content is ready */

2011-03-21 17:58:54

回答