"Looping an image so that it stretches length of the content", I need help with my content box, but can't seem to figure out how Options

[J_Starner]

Ok, so I understand how to repeat an image, and I am aware that it is also a great trick for creating faux columns. My problem is this, I have a div for my content box which is centered in the middle of the screen. It is no problem creating a repeated pattern for my content box, but my problem comes in when I want the top and bottom of the box to have "soft edges", but obviously you wouldn't want those repeating. Here is what I mean:

www.crazyegg.com

Notice on this site how the content box is centered in the middle of the page. Do you see the edges? How they are rounded edges? Well, my problem is that if I cut my content box into 3 pieces, two and bottom pieces with the soft edges, and then the middle piece that would repeat to stretch the content I run into the issue of putting the top of the box image at the top then have the middle image repeat for however much was needed to fit the content and then the third image at the bottom for the bottom of the content box. I hope this is clear!

I'm going to mess around with it as I think I see a few common sense ways it should work, but sometimes it isn't that easy. I'm guessing I could put the top image first in my html or css, then the middle image and put it on repeat, and then put the bottom image below that in my html css.

[pandy]

Wouldn't you want repeating top and bottom bits and non repeating left and right bits?

[Darin McGrew]

Actually, ALA's custom corners & borders uses more than 3 images.