Topic: CSS -- backgrond-repeat: repeat-y && height: 100% not playing nice (Page 1 of 1)

The site is genjo.net.

I'm probably doing this wrong, but what I'd hoped would work would be that the repeated img slice on the left, set to repeat vertically and having a height of 100% would repeat down a page of arbitrary length. To test, I set the content div on it's right to height: 1000px.

The image repeats correctly, but only for the length of the initial visual page. After scrolling down to see the rest of the 1000px content div, the repetition on the left appears to have stopped at the initial page length.

Offending CSS here:

#left-column {
position: absolute;
top: 0;
left: 0;
background-image: url(img/slice.jpg);
background-repeat: repeat-y;
height: 100%;
width: 116px;
z-index: 0;
}

#content {
position: absolute;
top: 51px;
left: 117px;
height: 1000px;
}

And the page code has everthing but these two items commented out.

Any idea what I'm doing wrong, or how this should actually be done?

the problem is not the background image, its your div which only goes down to the bottom of the initial visual page.
i think you gotta make this 1000 pixel high too

B | T | E | P | L

Well, yeah... that would take care of it. But I'd like to have that left-column repeat-y for a page of any length without worrying about height. So if the content on the right grows to 2, 3, 10, or 20 page lengths, the left-column would repeat-y for the entire length.

I thought that by specifying the height of the left-column: 100%, along with the fact that this 100% would be in relation to it's parent element (the body), that no matter how long the body was, the left-column would grow to match.

I've misunderstood, and the height: 100% only refers to the initial visual portion of the page?

i think thats a good old problem. cant you apply the bg image to the body?

B | T | E | P | L

Well golly-gee, that's it. I hope I would've thought of that sooner or later on my own...



You're swell-on-a-sunday in my book, and thx for the help mas.