浮在另一背景图像

我有一个背景图像，我想在我的页面的顶部，这个形象是宽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

回答