what did you do w/ the #main div? seems like you have atleast half a handle on moving or renaming those divs..... you've also got about half of the equation right w/ your #content-main div. but instead of the opening and closing div you have to wrap around the #main div.
function open() {
echo "<div id='content-main'>";
}
add_action('thematic_belowheader','open');
function close() {
echo "</div><!--#content-main-->";
}
add_action('thematic_abovefooter','close');
that should get you a div with the id of content-main around the #main div. from there you should be able to add the top image to the #content-main and the repeating image to #main... w/ a little padding/margin on one or the other (equal to the height of the top image you want to show) to unhide the top image. meh... that sounded confusing, but you should be able to figure it out in firebug once you get the right markup.