Using background-repeat and background-position together.

Question

Hey all,

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:

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

It's not possible to make a background start repeating from a specific position.

In your case one of the solutions would be to use a faux-columns in your whole page (starting from the top) and then use PNG transparency for your MMMM menu. Then you can degrade gracefully for IE and older browsers.

But I'm not sure I understand your question very well.

If the problem is that the YYYY column shouldn't be displayed above (where the MMMM is for example), then you can still use that faux-column thing and then wrap your MMMM menu and everything above YYYY in a div with a different beackground. This way it would hide your faux-column above YYYY.

Again, it's hard to help without seeing the actual design.

UPDATE:

This seems pretty hard to achieve with CSS only (I'm not sure it's even possible). There are a lot of solutions out there to equalize heights using javascript. See: http://spindrop.us/2007/05/22/equal-height-columns-with-jquery/

UPDATE 2:

Actually, if the XXXX part of your site stays at the same place all the time, you can fake the transparency and display a background-image corresponding exactly to the part of the actual background it is hiding. I've done that many times.

Answer 2

As far as I can see, you have two possibilities here:

1. Give the MMMM part of the right column a solid background color. Then it overlays the fake columns

2. Set the background image not to the container but to the YYYY and XXXX columns:

---

#XXXXcol {
  background: url(fake.png) repeat-y left top;
}

#YYYYcol {
  background: url(fake.png) repeat-y right top;
}

Note the "right" and "left" parts.

Answer 3

You could split the XXXX section into two parts (fixed size):

XXXX   MMMM
XXXX   MMMM
XXXX

And (vertical repeat of XXXX YYYY):

XXXX   YYYY
XXXX   YYYY
XXXX   YYYY
XXXX   YYYY
XXXX   YYYY
...

To position the background correctly you can manipulate the container (probably a div) that has the background-image applied to it.

Answer 4

I don´t know how your columns are positioned, but perhaps it would be possible to use your main background image (the site's background) as the background for the menu that is now green.

Or use an absolutely positioned div in z-index between your menu and your right column to "overwrite" your purple background. You could center that and put it behind your left column as well in case your lay-out is centered and the first solution is impossible.

Another solution would be to use javascript to set the height of your two main columns to have them go all the way down, but I would try css first...

Answer 5

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!