[SOLVED] Image as vertical divider sidebar/main content
 

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!

'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. :p

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?

Thanks, going to experiment with that as soon as the sun comes up again.

you could always just set the left margin of the right sidebar to the background color. It might not be perfect, but real simple. ATO->Style & configure SIDEBARS->RIGHT sidebar style CHANGE THE LINE
to
where rrggbb = your background color

That would have been my backup plan, but I got it to work!

:D

STB pointed me in the right direction, and I even got both the bottom and top fade-out in the same sidebar.

[Edit: Oh well, I got it to work in Firefox and Chrome. No IE so far. Ugh. Do you know if IE just doesn't like multiple backgrounds?]

Well, mission accomplished.

Snuck a div in there to hold the second background, and now it renders in all browsers I could find.