repeat-y layout issue_问答_开发者_运维开发者技术经验分享

update: at bottom

I am trying to get a layout working where the body background image is also the background for the first 123px of the main content div. I then want to put a background on the main content div (starting at 123px) and then fill down.

However repeat-y obviously fills both up and down and therefore repeats over the top of开发者_运维百科 the body background.

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

Something like this works great for a no-repeat:

#content {
 background: transparent url(images/content.gif) no-repeat  center 123px;
 width: 970px;
 margin: 0 auto;
 padding: 0 0 0;
 position:relative; 
}

but as soon as i add the repeat-y its going to fill the content div both up and down and overlay the first 123px of the background that i want from the body bg image.

I was thinking of adding a div inside the #content div which i set the repeating image on but then all my content would have to start 123pixels down and i want it to start at the top of the content div.

any ideas how i can overcome this?

UPDATE: Thanks for the reponses. I only just foud this site and i am quite new to html/css but i love the idea of the site. Hopefully i can help with some XSLT for others :)

Ok Erik's post has got me very close to what i need. I think i am not doing things the best way by trying to use the body background image in the top of the content div. I am going to slice the relavent part out of the background image and use it as a separate image in the top of the content div and use the z-index to put it on top of my main content repeat-y (shown in my example below by the dashed border).

my only remaiing problem with this is getting the content wrapper to scale vertically according to the content within. I have tred lots of things but i cant get it to work!

here's basically what i have now (sorry i cant host the example, but it should show the height problem).

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

You can get what you want with some z-index fun. Its not terribly semantic, but it works. Here's an example:

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

You can view source for the code.

Basically, I've put the column in a wrapper, and positioned the wrapper where I want the column. Then I've given the column an absolute position and a zindex of 3. Next, I create a div to hold the top half background, and give that a zindex of 2. Finally, the background that will repeat all the way down the page, and give that a zindex of 1. The entire page is here:

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

I suggest using this structure of html:

<html>
<body>
<div id='header'>stuff</div>
<div id='content'>stuff</div>
<!--footer optionally -->
</body>
</html>

suggested 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; }

I hope this helps.

I can help better if I see what the current structure of your html is.

Cheers,
jrh