I have a website www.collegecolosseumcontent.com

The current back image is this
http://www.collegecolosseumcontent.com/images/bg.gif

As you can see the center is white and the sides are grey.

I want to make the new background image this.
http://www.collegecolosseumcontent.com/images/1.png
(there is an image there )

I know in order to do that I want to make the CSS this:

body {
background-image: url(path/to/your/image..gif) repeat-x top left;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}

However when i do that I lose the white space in between grey area and thats what I want to get back after I replace bg.gif with 1.png

Thanks.

IE6 doesn't handle transparent PNG files (and I'm assuming it's transparent from looking at it in IE7).

It requires a hack, which has been long discussed in other threads on here. You're probably better off using the gif to repeat the background, but use repeat-y (vertical) instead of repeat-x (horizontal).

I think it may be easier if I show you a screen shot.

As you can see the background continues on behind everything.

What i'm trying to do is have the a white background for the width of the orange bar all the way down. Basically like if this was a table, and I just filled the bottom cell with a white background. That way the bars on either side and then its a plain white background behind the text, thumbnails, etc.

Can this be done?

Looks to me as if you've already done it with the bg image that you have.
I don't quite understand what it is that you want to do differently.

Well if you look at the current site you can see that the background behind the content is white with grey on the sides.

I want to make it so that the diagnoal line background I put up in the picture above only replaces the grey, and not the white background.

If I am understanding correctly I think if you made a container for all your content and set its background color to white and have the body background as the PNG it should turn out how you are asking. Unless I wrong about ways to use divs

In the div that centers your content, you can set a background-color of #FFFFFF. If you don't have one, you can make one.

If you check my blog, you can use the code I used there (with some tweaking for your purposes)...it even uses the diagonal lines!

Would the formating for that be in the CSS or in the index?

here is my current css make up

body,td,th {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
}
body {
background-color: #888A8A;
background-image: url(/images/bg.gif);
background-position: center top;
background-repeat: repeat-y;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
h1 {
color:#275083;
margin-top:0px;
margin-bottom:2px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:14px;
}
a:link {
color: #586AA7;
}
a:visited {
color: #586AA7;
}
a:hover {
color: #586AA7;
}
a:active {
color: #586AA7;
}
h2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
margin-top: 0px;
margin-bottom: 0px;
}
.itemType {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
color:#999999;
}
a.mediaTitle:link, a.mediaTitle:visited, a.mediaTitle:active {
text-decoration: underline;
color: #586AA7;
}
a.mediaTitle:hover {
text-decoration: none;
color: #586AA7;
}
.mediaTitleSml {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
color:#343D94;
}
.tditem {
border-color: #CCCCCC;
border-style: solid;
border-width: 1px;
}
.tderr {
background-color: #DDE1FF;
font-weight: bold;
color:#CC3300;
}
.mediaDetails {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #333333;
}
.medPicture {
margin-top:15px;
margin-bottom:15px;
}
a.topOptions:link, a.topOptions:visited, a.topOptions:active, a.topOptions:hover {
color: #FFFFFF;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
}
.clsAllMedia, a.clsAllMedia:link, a.clsAllMedia:visited, a.clsAllMedia:active, a.clsAllMedia:hover {
color: #FFFFFF;
font-family: Arial, Helvetica, sans-serif;
font-size: 15px;
font-weight: bold;
}
.redText {color: #275083}

In opinion the screen shot you posted looks like the best design. From what you are saying I think Adam answered your question. Put the div that is centered as #FFFFFF or #F7F7F7 or whatever color of white gradient you want. If there isn't one, you have to wrap all your content in one div and change the bg color.

Again , I personally think that the screenshot picture looks like the best/most appealing design.

yes, well I would like it to match our other site www.collegecolosseum.com so that the two sites have continuity.

I'm wondering, in the index.php could I just ad bgcolor=#FFFFFF to the table?

Nevermind, I thought I got it but I didn't.