HTML rectangle box with angled corners

Trying to achieve a fluid rectangle with angled corners with html/css and sliced images.

Here is what i have so far. http://jsfiddle.net/M888P/

<div class="main-title-wrapper">
<div class="main-title-inner">
<div class="main-title-top">&nbsp;</div>
<div class="main-title-left">&nbsp;</div>
<div class="main-title-right">&nbsp;</div>
<div class="strapline-container">
<h1 class="page-title">People for the hard places</h1>
<div class="sub-title-wrapper">
<p class="introtext">Together we can use our skills and passion to make a difference by going, giving and praying. Join our network of encouragers to see how you can help bring about God's great mission idea.</p>
</div>
</div>
<div class="main-title-bottom">&nbsp;</div>
<div class="main-title-tl">&nbsp;</div>
<div class="main-title-tr">&nbsp;</div>
<div class="main-title-bl">&nbsp;</div>
<div class="main-title-br">&nbsp;</div>

</div>
</div>

See image below

A much cleaner way would be to use border-image to align and size the image around content. You will only have to download a single image instead of one for every facet, and the code is much more readable.

At border-image.com, you can generate the proper css:

<!-- language: lang-css -->

.banner {
    border-style: solid;
    border-width: 39px 43px 41px 46px;
    -webkit-border-image: url(http://i.imgur.com/ziNitLf.png) 39 43 41 46 repeat;
       -moz-border-image: url(http://i.imgur.com/ziNitLf.png) 39 43 41 46 repeat;
         -o-border-image: url(http://i.imgur.com/ziNitLf.png) 39 43 41 46 repeat;
            border-image: url(http://i.imgur.com/ziNitLf.png) 39 43 41 46 fill repeat;
}

###Working Demo in Fiddle