Question

I’m trying to implement a faux column layout on a website. Briefly, it involves tiling a background image on the div that holds both the vertical columns to make it look like both columns extend all the way to the bottom.

My columns look like this:

XXXX   MMMM
XXXX   MMMM
XXXX
XXXX   YYYY
XXXX   YYYY
XXXX   YYYY
XXXX   YYYY
XXXX   YYYY

With a column on the left that goes all the way down the page, but with menus and transparency and stuff (“M”) at the top of the right column. I only want the faux column background to start once the real right column starts (“Y”), and to ignore everything above that due to the transparency between the menu and Y-column.

To do that, I was planning on offsetting the background image via (background-position: 0px 200px) to drop the image down 200 pixels. This doesn’t work.

I quickly realized that the image is repeating in BOTH directions vertically. Up and down from that original offset point. This obviously undoes the effects of the offset. But the background-repeat-Y is needed for faux columns to work.

How can I use both background-repeat and background-position together to get the layout I want?

Thanks!

UPDATE TO CLARIFY:

Here’s my layout:

alt text http://img38.imageshack.us/img38/3032/colorlayout.jpg

Ideally, the green wouldn’t be there and I could use an “orange – transparent – pink” image to do the faux columns for the entire columns. But if I did that now, the green menu would have a pink background due to that (really stupid, by the way) CSS repeat glitch. And I could do the green menu’s transparent background as a transparent png, but I don’t want that being repeated throughout the pink column. The site’s background is an image so I can’t just make the green menu’s div have a certain color background.

Seems to be a lose-lose situation.

Answer 1

I found an alternative to faux columns that works in this case:

http://www.positioniseverything.net/articles/onetruelayout/equalheight

Basically:

#page {
    overflow: hidden

#orange, #pink {
    padding-bottom: 32767px;
    margin-bottom: -32767px;
}

Thanks everyone!