Css'de bu arkaplan kodunu nasıl yapabilirim?

Resimde belirttiğim şekilde bu arkaplan uygulamasını aşağıdaki koda nasıl uyarlayabilirim?

body {
	margin: 0 auto;	padding: 0; font:10px Verdana, Arial, Sans-Serif; }

select, input, textarea {
	font-family:Tahoma; font-size:10px; }

a {
	text-decoration:none; color:#2489DB;}

a:hover {
	color:#808080; }

a img {
	border:0; }

hr {
	color: #eee; }

br {
	clear:left;}

#bg { 
	width: 840px; margin:0 auto; padding:15px 10px 10px 10px; background:url(img/bg.gif) top left no-repeat; }

#header {
	margin-left:2px; margin-bottom:3px; width:794px; background-color:#0D5AA0; border:1px solid #03386A; padding:10px; height:60px; }

#header h1, #header a {
	text-decoration:none; display:inline; font-weight:normal; font-size:22pt; color:#FFFFFF; font-family:Trebuchet MS, Arial; }

#header h2 {
	display:inline; font-size:12pt; color:#AFCEED; font-family:Arial; }

#sol_menu, #orta, #sag_menu {
	height: 100%; display:block; float:left; }

#sol_menu, #sag_menu {
	padding:0 2px 0 2px; width:150px; }

#orta {
	color:#666666; padding:0 10px 0 10px; width:492px; }

#orta h2 {
	border-bottom:1px solid #cccccc; margin:0px; padding:4px 0 2px 0; font-size:12px; clear:both; }

#orta p {
	margin: 0; }

#kategoriler {
	margin:0 0 5px 0; padding:0; width:135px; color:#5D5D5D; } 

#kategoriler ul {
	list-style:none; width:150px; margin:0 0 4px 0; padding:0; font-size:1.1em; }

#kategoriler li {
	margin-bottom: 1px; }

#kategoriler li a, #kategoriler li a:visited, #kategoriler li a.alt-kat, #kategoriler li a.alt-kat:visited {
	font-size:11px; text-align:left; height:20px; text-decoration:none; color:#fff; display:block; padding:6px 8px 0 10px; }

#kategoriler li a, #kategoriler li a:visited {
	background: #2489DB; }

#kategoriler li a:Hover, #kategoriler li a:visited:Hover, #kategoriler li a.alt-kat:Hover, #kategoriler li a.alt-kat:visited:Hover {
	color:#2489DB; background:#E5EFF9; }

#kategoriler li a.alt-kat, #kategoriler li a.alt-kat:visited {
	color:#286ea0; background:#A9CAEB; }

#kategoriler li a.aktif, #kategoriler li a.aktif:Visited, #kategoriler li a.aktif:Hover, #kategoriler li a.aktif:Visited:Hover {
	color:#FFFFFF; background: #2489DB url(img/icon.gif) 93% 50% no-repeat; }

#kategoriler li a.alt-aktif, #kategoriler li a.alt-aktif:Hover {
	color:#286ea0; background: #A9CAEB url(img/icon.gif) 93% 50% no-repeat; }

#puan_ver {
	margin-bottom:5px; padding:5px; background-color:#F7F7F7; border-top:1px solid #EEEEEE; border-bottom:1px solid #EEEEEE; }

#yorum-yaz label {
	display:block; width: 50px; float:left; margin-bottom:5px; margin-top:5px; text-align: right; width: 75px; padding-right: 20px;}

#yorum-yaz {
	padding:5px;}

#yorum-yaz input {
	display: block; float: left; }

#yorum-yaz fieldset {
	border: 1px solid #e4e4e4; padding:10px; text-align:center; margin-left:15px; }

#footer {
	padding:10px 0 5px 0; margin: 0 auto; width:400px; margin-top:10px; border-top:1px solid #cccccc; color:#666666; text-align:center; }

#footer a {
	font-weight:bold; }

#footer img {
	vertical-align:top; }

.kutu {
	margin:0 0 5px 0; padding: 5px; width: 138px; border: 1px solid #AFCEED; color: #5D5D5D; background: #E5EFF9; }

.kutu ul {
	list-style:none; margin:0px; padding:0px; }

.kutu li {
	background: url(img/icon4.gif) 2% 22% no-repeat; padding: 4px 0 4px 16px; margin-top: 2px; border-top: 1px solid #ccc; }

.kutu h3 {
	margin-bottom:7px; margin-top:7px; color:#666666; font-size: 8pt; }

.uyari {
	color:#000000; padding: 10px 0 10px 0; text-align:center; width: 100%; border: 1px solid #FF3300; background: #FFCCCC; }

.uyari h1 {
	margin: 0px; padding: 4px 0 2px 0; font-size: 11px; color:#FF3333; }

.yesil_kutu {
	padding:10px 0 10px 0; text-align:center; width:100%; border:1px solid #00CC00; background: #CCFFCC; }

.yesil_kutu h1 {
	margin:0px; padding:4px 0 2px 0; font-size: 11px; color:#006600; }

.info {
	font-family:Tahoma; padding:5px 5px 5px 0px; margin:5px 0 15px 0; color:#808080; }

.info img {
	vertical-align:bottom; }

.ozet {
	margin-top:5px; margin-bottom:15px; font-size:11px; }

.yorum_baslik {
	border-bottom: 1px solid #AFCEED; background: #F0F7FF url(img/yorum_baslik.gif) 1% 56% no-repeat; padding: 5px 0px 5px 32px; }

.yorum_ozet {
	overflow:auto; height:auto; width:468px; margin-bottom:10px; padding:5px; border-bottom: 1px dashed #AFCEED; }

.input {
	border-width: 1px; border-color: #E6E9ED; background-color: #f7f7f7; font-family: tahoma; font-size: 11px; width:250px; display: block; float:left; margin-bottom:5px; margin-top:5px;}

.haber-resim {
	max-width:250px; }

Basitçe şablonu oluşturdum resimdeki gibi.. Bunu kendi kodlarına göre derleyerek gerisini getirebilirsin sanırım..

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
.ana {
	width: 900px;
	margin: auto;
}
.sol {
	width: 300px;
	background-image: url(sol_resim.jpg);
}
.sag {
	width: 300px;
	background-image: url(sag_resim.jpg);
}
.orta {
	width: 600px;
}
body { margin:auto
}
-->
</style>
</head>
<body>
<div class="ana">
<div class="sol">
<div class="orta">
<div class="sag">
</div>
</div>
</div>
</div>
</body>
</html>