Well your code is a little messed up. What you should do is put it in a table and make sure that the whole table is about 780px so that even people in 800x600 resolution will be able to see it. I'm on 1280 or whatever and the flowers aren't aligned properly. You also have 2 body tags and your iframe is in your head section and not the body section. This is it cleaned up in tables (i haven't tested it)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Tutorial Index</title>
<style type="text/css">
<!--
BODY {
scrollbar-face-color: #EBDCDC;
scrollbar-highlight-color: #EBDCDC;
scrollbar-3dlight-color: #754747;
scrollbar-darkshadow-color: #754747;
scrollbar-shadow-color: #754747;
scrollbar-arrow-color: #754747;
scrollbar-track-color: #754747;
}
-->
</STYLE>
<script language=JavaScript>
<!--
//Disable right click script III- By Renigade (renigade@mediaone.net)
//For full source code, visit http://www.dynamicdrive.com
var message="";
///////////////////////////////////
function clickIE() {if (document.all) {(message);return false;}}
function clickNS(e) {if
(document.layers||(document.getElementById&&!document.all)) {
if (e.which==2||e.which==3) {(message);return false;}}}
if (document.layers)
{document.captureEvents(Event.MOUSEDOWN);document. onmousedown=clickNS;}
else{document.onmouseup=clickNS;document.oncontext menu=clickIE;}
document.oncontextmenu=new Function("return false")
// -->
</script>
</head>
<body>
<center>
<table width="780px">
<tr><td width="390px"> image here</td>
<td width="390px">
<iframe src="http://realmofcreations.com/Tutorials/tutorials.html"
width="400" height="390" align="right" style="border: 4 dotted #754747
marginwidth="0 marginheight="0"
hspace="0" vspace="0" frameborder="0" scrolling=yes>
</iframe>
</td></tr></table>
</center>
</body></html>
Just put your background image, that cream color, in your body tag and crop your image a little.
That's what I would do.