I'd like to put an image as divider between the main content and the sidebar, and I want it to be fluid with the site length.

I tried playing around with border-image in the css, but that doesn't seem to work. Placing the image as a background-image has the disadvantage that it doesn't scale with the site-height. And of course I only want it to scale in height, not in width. I tried floating the image and a div with the image in it (above the loop) but I couldn't get that to work.

Do you have any ideas about how to get this done? I'm OK with splitting the image into a top, middle (for extension) and bottom, but I need some help with where to put either the whole image or the parts.

The effect I'm after is like the vertical divider at http://www.pragmatichybrid.com, but they have it as part of the site background and I don't think I can pull that trick because I already have 2 images as site background, 1 in the body tag and one in the html tag.

My site is http://playyourwordsright.com

Thanks!

pragmatichybrid uses it like this:

div#container{
url("images/bgfade.gif") repeat-y scroll 0 0 transparent;
}

(with the full link to the gif being: http://www.pragmatichybrid.com/wp-co...ges/bgfade.gif)

Same/similar method (background image for the container div) should work for your site too I'd think.

'fraid not.

That bgfade.gif is just the top 23 pixels of the divider. The rest of the divider is created in the background of the site, it's one picture with the drop shadows that surround the page. Switching off the bgfade.gif in Firebug only takes away the 'fade-out' effect at the very top, leaving the rest of the divider in place.

Nasty little trick, that.

No really Maartje...

bgfade.gif on that site is a 856x1 px gif, which is repeated vertically for the full height of the #container div.

On pragmatichybrid, it both holds the 3d effect on the leftside of the container, as well as the right column background.
But you can of course make your own version as you see fit.

Oh yeah, you're completely right. I was confused about the image names. They have one in the background, and a separate pic for the fade at the top and bottom. (He calls everything 'fade.' Confusing.)

Maybe I can try putting it on the #container. I was experimenting with the body and html tags and that didn't work. I'll try that.

They have put the lower fadeout image in the footer, though. My footer is not connected to the central column like theirs is, though. Any idea how I can get both the top and bottom fade pictures to display correctly?

Originally Posted by Maartje

<...>
They have put the lower fadeout image in the footer, though. My footer is not connected to the central column like theirs is, though. Any idea how I can get both the top and bottom fade pictures to display correctly?

Instead of just 'footer', you have 'bovenfooter' & 'footer'.
You can set backgroundimages for both, for a seamless effect.
Basically the same method, just spread over 2 div's.