That was done by putting the design in a 1 row, 2 column table. The images at either end are in different columns and then aligned to the left (for the left image) and aligned right (for the right image) with a background image applied to the table ... which is what connects the two images together graphically.
<div id="abovebanner" align="center">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="404" background="LEFT IMAGE URL"><img src="LEFT IMAGE URL" width="404" height="207" border="0"></td>
<td background="TABLE BACKGROUND URL"><div align="right"><img src="RIGHT IMAGE URL" width="468" height="207"></div></td>
</tr>
</table>
</div>
Then I used the following code to remove the line break at the top of the forum so that the table touches the top of the window.
<script type="text/Javascript">
document.getElementsByTagName("br")[0].style.display = "none";
</script>
I then used the following code to remove the welcome table.
<script type="text/javascript"><!--
document.getElementsByTagName("table")[0].style.display = "none";
//--></script>
This next code is what moves the table I made above where the welcome table would normally sit.
<script type="text/javascript">
<!--
/* content above welcome table */
var wTab = document.getElementsByTagName("table")[0];
wTab.parentNode.insertBefore(document.getElementById("abovebanner"), wTab.nextSibling);
// -->
</script>