Stretching a container with a background image

[cbondi]

Hi there
I have a template that I am working on making into a wordpress theme that was created by a graphic designer. You can see an example by clicking the link below. My question is what is the best way to stretch the container so that if the text in the content area grows the container can grow with it. The top of the container has a tree trunk wrapping across the top and down the right side and then flowing into the header area as roots. I know I could create a fixed content area that scrolled if it got bigger but I want to know if there is a way to somehow stretch it down so the whole thing gets taller but retains the top and bottom of the tree? Would you slice the tree image, anyway not even sure exactly how to put this questions but if anyone has any suggestions or knows of a tutorial or any other info I'de appreciate it.
thanks

http://www.awakeninthenow.com/images/sample.jpg

 

[Phreaddee]

you would slice the tree around the "contact details" section.
make a background image of that div that includes the trunk to repeat all the way down.
then have the roots within the footer.
a bit fiddly but with some work you'll be able to acheive it.

 

[cbondi]

Wouldn't I need a separate image for the top of the trunk? Then I'm imagining the slice would have to be done where the image is symmetrical so it would repeat vertically properly. So does it make sense to break it into three images, top, slice and bottom? Only the slice would be the background of the content area?

 

[Phreaddee]

the top and bottom would be fixed in height whilst the mid section would be flexible depending on the content. the trunk within the flexible div would actually start much higher up, but because it would be sitting underneath the tree top it would not be noticeable. the top of the trunk would probably work best as an overlaid image, and dare I say it absolutely positioned. you would probably need to also include a min-height variable on the content box so that it would not collapse onti itself when there is no content.

 

[cbondi]

Thanks for the feedback on this, I knew there was a way to make this work without having to use scroll bars....