I'm helping some friends set up a web site. The general style will have the usual Slashdot-esque announcements going down the center, with buttons on the side to teleport you to various specialized pages. The goal is to have a repeating background image for the center column. There are two obvious solutions, and neither is doing what I want.

Option 1: set up a background image for the center table. However, if the center table is shorter than the stuff around it, I'd really like the image to continue repeating down until the web page would normally end.

Option 2: set up a layer positioned under the center table. If I want the image to repeat in the layer, the best way to do it that I can find is to set it to be a background image for the layer. However, I need to set the layer's height. If I set the height to be some very long number, then it will happily tile the image on down, but the main browser window will make sure that you can scroll down to see the whole frame. This happens even though I have overflow: hidden set on the layer, which I guess makes sense, since it's supposed to be talking about what happens if the stuff inside the layer wants to bust out, not about what happens if the layer, itself, is too big for the page.

The answer must be some variant of the option 2. I guess my question is whether I can, for example, set the layer height to zero and use JavaScript to sniff out the height of the page after it's done laying out, then set the layer's height to match the page.

Edit: So far I've figured out a variant on option 1 that does what I want, but I'd love to know if there's a right way to do this with layers.

Thoughts?

Can you post a linky or some code? Might make it easier to understand what you are looking for.

Here's the web site as I've currently thrown it together:

http://www.ruf.rice.edu/~rsds/

I'm mostly happy with the results, although I'm still unhappy about a few things, and I'd appreciate any feedback people might have about:

- Positioning of the silhouette image in the upper left. I tried putting all of the "style" information into the style sheet and just assigning a class to the layer, but that didn't work. I assume the whole idea of style sheets is to put all that grungy positioning stuff somewhere else entirely, but I can't seem to make it work for me in this one instance.

- Having the left margin of all of my text and headings line up. Check out this page. I'm able to get some nice subheadings by saying <p class="blah">Subheading here</p>, but it ends up having a different left margin than the other paragraphs. I assume I just need to tweak some more things in my style sheet.

- You can see how I used an image as the background behind the main column of text. I'm not sure I like the effect, but I'm not really sure how to do it much better.

Here is a re-creation of your page using a table-less CSS design. If you view the page's code, you'll notice that I have kept things to a bare minimum. It even validates.

As far as being able to correct your issues, I'm not sure if I have accomplished that or not. I know that the silhouette graphic is now positioned via the external style sheet. Also, the paragraphs should be lining up with the headlines.

Since I'm not a fan of tiling backgrounds (unless they are seamless), I added a background color to the content area and applied the background image to snap to the bottom.

Another suggestion might be to put the "What do I wear" information into a list style (with bullets).

Hope this helps.

Wow, that's brilliant! I'd always heard that CSS style sheets could perform works of magic, but I never learned how to make the magic happen. I can definitely work from this.

Thanks!

Good deal. Glad I could help.