I think you are making this more complicated than it needs to be...
This kind of page (presented in stripped down terms) could look like this:
...
<div id="wrapper">
<div id="content_top"></div>
<div id="content">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
<p>More paragaph stuff goes here. More, more more...</p>
</div> <!--content ends-->
<div id="content_bottom"></div>
</div> <!--wrapper ends-->
...
<!--styles-->
body{
text-align:center}
#wrapper{
width:960px;
margin: 0 auto;
text-align:left;}
#content_top{
background: url(../images/content_top.png) no-repeat top left
height:30px;}
#content{
background: url(../images/content.png) repeat-y}
#content p{
font-size: small;
padding: 10px 30px 10px 30px;}
#content_bottom{
background: url(../images/content_bottom.png) no-repeat top left
height:50px;}
The three images cold be created from one single image that includes your rough looking edges on all four sides. The upper image will be sliced off the top at say 30 pixels in height. The bottom could be sliced at say 50 pixels in height. The middle height is up to you. It just needs to be sliced in such a way that the upper edges are the same as the lower edges or else it wont look good when you tile it down the y-axis.
Its best to avoid having the tiled slice be too tall as the graphic "weight" can get large, especially if you are using png-24 files. The other issue with having a tall tile is when there is very little content being used with that graphic. You might need the tile for just one sentence but if that tile is 400 pixels in height you will have a ton of empty space showing. Some users make their tile slices too thin. This makes the browser work hard to tile that slice repeatedly. Some flavors of IE can show a slight delay while doing this. Its good to pick a happy medium.
Some purists will say that using divs just to present the upper and bottom portions of these images is a bad thing. What some will do is not have a div for the upper and lower images set specifically. You could use a headline declaration for the upper and and lower portions of this content area. You then set the CSS to add a background image to these headlines like so:
#content h3{
font-size:1.4em;
font-family: "Lucida Grande", Geneva, Arial, Verdana, sans-serif;
background: url(../images/content_top.png) no-repeat top left;
height:30px;}
The other instances for the h3 in your CSS will apply normally. Its important to realize the rules of specificity in the CSS Cascade.
You could also stuff like <p class="upper"> and attach that upper graphic to it using the background CSS declaration. Lots of ways of doing this. What I will sometimes do is let MODx generate its natural code. I then look at some of the divs and classes that MOD generates and then add or modify the CSS accordingly. This helps reduce adding extra container divs around the MODx goodness. I see a lot of code with unneeded divs. Some snippets generate a lot of usable divs and classes to attach powerful CSS onto. Often this can be an advantageous thing.
But adding a couple of extra divs is not a crime in my book.
I am sure there are other ways. I rely heavily on building the right support images for the layout. I also watch the code that MODx generates and tweak the CSS to my own will. I probably do this more than most as I really lack PHP skills. But I have no problems pushing pixels around. But its amazing how flexible MODx can be in these situations...
