Standard 3-column layout

Need two background images in left column

[GaryK]

Hi all. I normally only handle programming, not layout, so this is all quite new to me.

In a 3-column layout (sidebar, gutter, content) is it possible to have the equivalent of two background images in the sidebar? One that's a fixed height and the second that only gets displayed under the first if the page is taller than the height of the first background image. Sometimes there will be a lot of content on the page. Other times not.

I had someone design a background sidebar image for me. It's a slightly opaque tiki so that text is very readable on top of it. The top is 900 pixels high which will be more than enough most of the time. The bottom is 100 pixels high, looks sort of like an uncarved log, and can repeat on the y-axis as-needed without looking like it's a repetitious pattern.

Hopefully that made sense to you all. Is there some way to accomplish this with CSS? I've been struggling with it all morning with no consistent success. Thanks in advance for whatever help is offered.

[csleh]

You can only 1 background image to an element -- but, you can add elements to stack images. for instance, here's one way:

<div id="sidebarback">
 <div id="sidebar">your content here</div>
  </div>

and the css:

#sidebarback {background-image: url (location of the image) repeat-y top left;}
#sidebar {background-image: url (location of the image) no-repeat top left;}

or you could assign the css to body or another container, depends on your page.

#sidebarback is for the background image that adjusts with the height, #sidebar for the one directly between the text and the variable height graphic.