Question

我想在页面顶部找到一张背景图片，此图片的宽度为800px，高度为400px。

在这张图片下，我想要另一张背景图片，它会在页面的其余部分重复垂直（重复-y）。

我试过以下

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

问题在于我想要“文字在这里”浮动两个元素。（见图，http://img219.imageshack.us/f/skrmavbild20110321kl160.png/）

我该怎么办呢？

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

Answer 2

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

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