重复-Y布局问题

我试图让布局工作在身体背景图片也是为主要内容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; 
}

但只要我添加重复-Y它要向上和向下填充内容股利和覆盖第一123px的背景，我想从身体bg图像。

我正在考虑在#content div中添加一个div，我在其上设置重复图像，但随后所有内容都必须开始123pixels向下，我希望它在内容div的顶部开始。

任何想法如何，我可以解决这个？

更新： 感谢您的回应。我才刚刚foud这个网站，我是很新的HTML/CSS，但我喜欢的网站的想法。希望我可以帮助其他人的一些XSLT :)

好Erik的帖子让我非常接近我需要的东西。我认为我不是通过尝试在内容div的顶部使用正文背景图像来做最好的方式。我将把relavent部分从背景图像中切出，并将其用作内容div顶部的单独图像，并使用z-index将它放在我的主内容repeat-y的顶部（如我的示例所示下面是虚线边界）。

我这个唯一的remaiing问题越来越内容包装按照中的内容垂直缩放。我有很多东西，但我不能让它工作！

这里基本上是我现在有（抱歉，我不能主持的例子，但它应该表现出高度的问题）。

<!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>

来源

2010-01-03 tommot82

你可以添加目前你的html结构吗？我认为你所有的代码需要的是“最佳实践”的小剂量:) – jrharshath 2010-01-03 12:43:51

你可以得到你想要的一些z-index的乐趣是什么。它不是非常有意义的语言，但它起作用。这里有一个例子：

http://www.pixeloution.com/bg_test.html

您可以查看源代码。

基本上，我把列放在一个包装中，并将包装器放置在我想要的列的位置。然后，我给了该列一个绝对位置和一个3的zindex。接下来，我创建一个div来保存上半部分背景，并给出zindex为2的值。最后，背景将沿着页面一直重复，并给出一个1的zindex。整个页面在这里：

<!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>

来源

2010-01-03 12:52:02 Erik

哦，谢谢你，你会惊讶多少，a）帮助和b）我从中学到了:) 我知道如何使用它来实际创建我想要的，但我将需要从正文背景并将其切片在#top_background中使用。目前我的背景图像设置在身体上，我想让＃顶部背景透明以显示此背景。不过，你的建议会告诉我橙色＃底部背景不是身体背景。我尝试移动#bottom_background的相对位置，但是这会将所有内容推向下方，然后导致错误高度。 – tommot82 2010-01-03 14:21:30

我编辑了原文，并附上了我在哪里感谢你的帮助的一个很好的例子 – tommot82 2010-01-03 14:34:22

我建议使用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

来源

2010-01-03 12:47:16 jrharshath

谢谢！我不知道那个以ie6'hack'为中心的人，我会玩这个游戏。我更新了origianl文章，并以一个很好的例子说明了我正在尝试做什么以及我在哪里。 – tommot82 2010-01-03 14:35:45

重复-Y布局问题

回答

相关问题