Part of the choppiness is the fact that the top and middle images don't exactly match, so the main color breaks and the edges jump from one thickness to another.

Part of it is that the top image is taller than the standard heading height, so the bottom of the swirl gets cut off. You can increase the padding on the heading so it expands to show more of the swirl, though that will push the content down by the same amount.
Code:
.leftBoxHeading, .rightBoxHeading {
    background: url(../images/top.jpg) no-repeat;
    border: none;
    padding: 0.5em 0.2em 2.0em;/*adjust as required*/
    }
Alternatively, if the top swirl is tall, you can combine and stretch the top and middle images and make one image that is as tall as any sidebox you would ever have. Then you would eliminate any background in the heading and put the modified image in the container, where it won't matter how tall the heading is.
Code:
.leftBoxHeading, .rightBoxHeading {
    background: none;
    border: none;
    padding: 0.5em 0.2em;
    }

.leftBoxContainer, .rightBoxContainer {
    background: url(../images/topmiddle.jpg) no-repeat;
    border: none;
    }