更新
我正在尝试使用布局工作，其中正文背景图像也是主要内容div的第一个123px的背景。然后，我想在主要内容div（从123px开始）上添加背景，然后填写。
然而，重复y显然会向上和向下填充，因此会在身体背景的顶部重复。
----------------------
| |
| HEADER DIV + NAV |
BODY WITH | | BODY WITH
BACKGROUND IMAGE|--------------------| BACKGROUND IMAGE
| ^ |
| CONTENT DIV | |
| 123px|
| | |
| v |
|--NEW CONTENT IMAGE-|
BODY WITH | | BODY WITH
BACKGROUND IMAGE | | BACKGROUND IMAGE
| |
| |
|<--------------------100 % Width------------------->|
这样的东西非常适合不重复：
#content {
background: transparent url(images/content.gif) no-repeat center 123px;
width: 970px;
margin: 0 auto;
padding: 0 0 0;
position:relative;
}
但是一旦我添加了repeat-y，它就会向上和向下填充内容div并覆盖我想要的身体bg图像的第一个123px。
我正在考虑在#content div中添加一个div，我设置了重复图像但是然后我的所有内容都必须启动123pixels，我希望它从内容div的顶部开始。
我怎么能克服这个想法？
更新 谢谢你的回应。我只是这个网站，我是html / css的新手，但我喜欢这个网站的想法。希望我可以为其他人提供一些XSLT帮助：）
好的Erik的帖子让我非常接近我需要的东西。我认为我不是通过尝试在内容div的顶部使用正文背景图像来做最好的方法。我将从背景图像切出相关部分并将其用作内容div顶部的单独图像，并使用z-index将其置于主要内容repeat-y之上（如我的示例所示）下面是虚线边框）。
我唯一的遗留问题是让内容包装器根据其中的内容垂直缩放。我已经做了很多事情，但我无法让它发挥作用！
这基本上就是我现在所拥有的（对不起，我不能主持这个例子，但它应该显示高度问题）。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"
>
<html lang="en">
<head>
<style>
* {margin: 0; padding: 0; }
body {
font-family:Arial,Helvetica,sans-serif;
width:100%;
background:red url(images/bg.jpg) no-repeat scroll center top;
display:table;
}
#top_bar{
height:17px;
background: green url(images/top_bar.jpg) no-repeat scroll center top;
padding:0;
margin:0 auto;
}
#header{
height:221px;
width: 970px;
background:pink;
position:relative;
margin: 0px auto;
}
#wrapper{
position: relative;
margin: 0 auto;
height: 300px;
width: 970px;
}
#content {
color:white;
height:100%;
width: 970px;
margin: 0 auto;
padding: 0 0 0;
position:absolute;
top:0;
left:0px;
z-index: 3;
}
#top-background{
height:123px;
width: 970px;
position:absolute;
background:red;
top:0;
left:0px;
z-index: 2;
border:dashed 3px #000;
}
#bottom-background{
height:100%;
width: 970px;
background: blue url(images/content.gif) repeat-y center top;
position:absolute;
top:0px;
left:0px;
z-index: 1;
}
#wrapper-foot{
height:50px;
width:970px;
position:relative;
margin: 0 auto 50px;
background:orange;
z-index: 1;
}
</style>
<title>Hi there</title>
</head>
<body>
<div id="top_bar" ></div>
<div id="header">
<!-- some nav etc -->
</div>
<div id="wrapper">
<div id="top-background"></div>
<div id="bottom-background"></div>
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>
</div>
<div id="wrapper-foot"></div>
</body>
</html>
答案 0 :(得分：1)
你可以通过一些z-index乐趣获得你想要的东西。它不是非常语义，但它的工作原理。这是一个例子：
http://www.pixeloution.com/bg_test.html
您可以查看代码的来源。
基本上，我已将列放在包装器中，并将包装器放在我想要列的位置。然后我给了列一个绝对位置和一个3的zindex。接下来，我创建一个div来保持上半部分背景，然后给它一个2的zindex。最后，背景将一直重复到页面，并给它一个zindex为1.整个页面在这里：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"
>
<html lang="en">
<head>
<style>
#wrapper {
position: relative;
margin: 0 auto;
width: 300px;
height: 600px;
}
#column {
position: absolute;
margin: 0 auto;
height: 600px;
z-index: 3;
}
#top_background {
width: 300px;
height: 150px;
position: absolute;
top: 0px;
left: 0px;
background: pink;
z-index: 2;
}
#bottom_background {
width: 300px;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
background: orange;
z-index: 1;
}
</style>
<title>Hi there</title>
</head>
<body>
<div id="wrapper">
<div id="top_background"></div>
<div id="bottom_background"></div>
<div id="column">
<p>This is my content. There are just lines and lines of it. They
go on and on but really don't say very much. Or anything at all.
They really just talk about themselves. Very meta.</p>
<p>This is my content. There are just lines and lines of it. They
go on and on but really don't say very much. Or anything at all.
They really just talk about themselves. Very meta.</p>
<p>This is my content. There are just lines and lines of it. They
go on and on but really don't say very much. Or anything at all.
They really just talk about themselves. Very meta.</p>
<p>This is my content. There are just lines and lines of it. They
go on and on but really don't say very much. Or anything at all.
They really just talk about themselves. Very meta.</p>
<p>This is my content. There are just lines and lines of it. They
go on and on but really don't say very much. Or anything at all.
They really just talk about themselves. Very meta.</p>
</div>
</div>
</body>
</html>
答案 1 :(得分：0)
我建议使用html的这种结构：
<html>
<body>
<div id='header'>stuff</div>
<div id='content'>stuff</div>
<!--footer optionally -->
</body>
</html>
建议使用css：
body { text-align: center; }
body div { text-align: left; } /* centering for ie6 */
#header { height: 123px }
#content { background:transparent url(images/content.gif) repeat-y; }
我希望这会有所帮助。
如果我看到你的html的当前结构是什么，我可以帮助更好。
干杯，
JRH