CSS–How to slice up attached PSD Comp

[robst]

Hi CSS Folks,

I would greatly appreciate some suggestions/feedback on the best way to slice up the attached layout. Here’s what I need help on—in order for the content to get bigger depending on how much content is in the div, I need the wooden borders on the left to grow with the content. So, therefore, how do I slice up the side wooden borders so they seamlessly repeat down the page. Other than using the “background-repeat:repeat-y” property, I’m not sure how I will acheive the best solution here.

Thanks for your advice/input; I greatly appreciate it. Please see the link to image

[robst]

Thanks Mottie! :) I’m going to check out the link now.

[mshort1985]

assuming you want that background image to stay fixed I would set that as the body image and use position-attachment:fixed. then I would do as mottie said and just cut a small sice of that wooden border and the colour inside it and use repeat-y on it. then of course have separate divs or use multiple backgrounds to do the top and bottom bits. :)

[robst]

Thanks mshort1985! That did the trick! However, it looks like I need a bit more work on seamless tiling…the wood borders still don’t look quite right. I’ll post a link here as soon as I get this looking just right!

[robst]

P.S. I just found this site the other day that uses wood borders as well:

http://oceanspray.com/

Aye Carumba! Do you see how many different slices they used to achieve wood borders? Yikes. I would have hated to be the developer coding/chopping this site up. While the site looks good, technically, I think they made more work for themselves.

[Author]

Posts