在另一个背景图像下浮动垂直背景图像答案

【问题标题】：Float vertical background-image under another background-image在另一个背景图像下浮动垂直背景图像
【发布时间】：2011-03-21 15:20:27
【问题描述】：

我在页面顶部有一个我想要的背景图像，该图像的宽度为 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/）

我应该怎么做？

【问题讨论】：

【解决方案1】：

你让这看起来太复杂了，但它非常容易。这是你需要做的：

您的“无限重复”图片将作为网站背景，如下所示：

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 */

【讨论】：

【解决方案2】：

我认为解决方案是相反的：在外部设置重复背景div，在内部设置固定高度背景div。

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

【讨论】：