simply adding an image or color to bg Options

[alexisb]

But I want to be able to add the color/img to the background without changing the white bg on the tables.

http://myspace.com/alexisbelon

CODE

<style>
.Hide Orange Bars and Text{rr}
td.text table {width:100%;}
.friendsComments td table, .friendsComments td.text table, .friendSpace table, .blurbs, .blurbs td.text {background-color:transparent; border:0px;}
.orangetext15{display:none;visibility:hidden;}
body {background-color:ffffff;overflow-x:hidden; margin-top:500px; background-attachment: scroll; background-repeat:repeat-y;background-image:url(); background-position:center top;}
table table table {background-color:transparent; width:100%; max-width:435px; border:0px solid; border-color:000;}

table, tr, td, li, p, div, a, p,font,.text ,.btext ,.redtext, .redbtext, .btext {font-family: Arial, Helvetica, sans-serif; color:000; font-size:8.5pt; font-weight:normal;}

.nametext, .orangetext15, .blacktext12 {color: 9d7082; text-align:center !important; font-family:arial black; font-weight:bold;letter-spacing:-2px;}
.orangetext15,.blacktext12, .blacktext12 {font-size:14pt; text-transform:lowercase}
.nametext{ font-size:20pt; text-transform:lowercase; line-height:15pt}
.redbtext,.lightbluetext8 {color:000; font-size:8.5pt; font-family:arial}
.blacktext10,.whitetext12 {color:000;font-size:15px; display:block; font-family:arial; }

a:active, a:visited, a:link, a.searchlinksmall:active, a.searchlinksmall:visited, a.searchlinksmall:link, a.navbar:active, a.navbar:visited, a.navbar:link, a.redlink:active, a.redlink:visited, a.redlink:link {color: c0c0c0; font-family:arial }
a:hover, a.searchlinksmall:hover, a.navbar:hover, a.redlink:hover {color:fff; letter-spacing:1px; text-transform:uppercase}

span.blacktext12 {visibility:visible !important;padding:0px !important; width:435px; height:40px; display:block !important; }

.contactTable {width:300px !important; height:220px !important; padding:0px !important;
background-image:url(http://img231.imageshack.us/img231/2448/abcontactnz5.png);
background-attachment:scroll; background-position:center;background-repeat:no-repeat; background-color:transparent;}
.contactTable table, table.contactTable td { padding:0px !important; background-color:transparent;
background-image:none;}.contactTable a img {visibility:hidden;}
.contactTable .text {font-size:1px !important;}
.contactTable .text, .contactTable a, .contactTable img {filter:none !important;}
.contactTable a img {visibility:hidden;}
.contactTable .text {font-size:1px !important;}
.contactTable a {display:block; height:28px; width:115px;background-color:transparent!important;}
.contactTable a:hover { background-color: transparent;}
.contactTable .whitetext12 {display:none;}

table table table td {vertipcal-align:top !important; }
table, tr, td { background-color:transparent; border:0px; }
table table { border:0px; }
table table table table { border:0px; background-image:none; background-color:transparent; }
td.text td.text a img {width: 80px !important; margin:2px; border: 1px solid; padding:1px}
div.alexis {position: absolute;top: 0;left: 50%;margin-left: -500px;width: 1000px;height:500px;}</style>
<div class="alexis" align="center"><img src="http://img352.imageshack.us/img352/2045/abcopykz4.png" border="0" /></div>

Reason for edit: Use [codebox] for longer codes. - Gabi :)

[alexisb]

ha! yes, you're right. that IS the problem. but yikes, i didn't realize my header was so much wider than the tables. they don't line up evenly. is there any way to do this? Stretch the tables out as wide as the image at the top?