Styling a resizable div container with a 'papyrus' background graphic

HTML & CSS
1

Hello people,

I want to create a resizable (through CSS) div box with a background graphic that looks like a papyrus scroll…

e.g. something like this http://blogs.oswaltacademy.org/groups/navarro/wiki/6a764/images/1de58.jpg

I’ve gotten the bitmap from the client, now I want to build it in HTML/CSS to accommodate content of various sizes.

My primary concern is to have it with custom heights. But if I could also do custom widths I’d be in heaven.

Any help, pointers or tips greatly appreciated.

Thanks!

2

You aren’t going to have much luck with variable width if using a background image like that. As for height, you really can’t afford a fixed height, so the best thing to do is find a middle section that can repeat as many times as necessary.If you cut off the bottom curl and have that in a separate div, the repeating part should match up nicely with that bottom part.

3