css background image not seamless

I am using html5 and am trying to create a rough edged seamless border(top, sides + bottom).

I am aware ie8 does not support the CSS3 border image. IE8 is as far back as am willing to cater for.

So am using 3 div's to have the background image display, the only problem is depending on the length of the content, the bottom background image does not align nicely and make the box appear seamless, due to the repeated middle image being cut off prior to the point where the border merges.

I开发者_JAVA百科 have used a brush in photoshop to create the jagged container. I have had a nose around about this but can not find a solution to fit.

The solution is to set a specific increase of height increment for your content area. This can be done in a couple of ways:

1. If your content is mostly text, you can set your line-height and/or the height of any other used elements to be the desired increment (or a multiple thereof) and hope for the best.
2. If this will not work, the only other way would be to use JavaScript.

Here are a couple discussions of this very challenge, including some thoughts on using line height and some starts at workable JavaScript code:

• http://doctype.com/any-way-increase-hieght-div-specific-increment
• http://www.dynamicdrive.com/forums/showthread.php?t=64034