I want the webpage background of my website to be broke into 3 columns. The 2 outside columns will be equal in width and the middle column will be behind the main webpage container. I want to be able to switch out the left and right columns with different BGs and this should make it load faster. Does anyone have any idea how I can do this using CSS?

There are tons of layout tutorials on how to create a 3-column layout with CSS. What you put in as the background is the easy part, get the layout figured out first.

Try this one,
HTML:

<div id="body">   
  <div id="header"></div>
     <div id="main">
         <div id="content-1"></div>
         <div id="content-2">
             <div id="content-2-1"></div>
             <div id="content-2-2"></div>
         </div>
     </div>
     <div id="footer"></div> </div>

CSS:

body {    
 margin:0;     
padding:0;     
color:#000;     
background:#fff; 
} 
#body {     
width:960px;     
margin:0 auto;     
background:#ddd; 
}
#header {
     padding:10px;
     background:#fdd;
 }
#content-1 {
     float:left;
     width:220px;
     padding:10px;
     background:#bfb;
 } 
#content-2-1 {
     float:left;
     width:460px;
     padding:10px;
     background:#ddf;
 }
 #content-2-2 {
     float:right;
     width:220px;
    padding:10px;
     background:#dff;
 } 
#footer {
     clear:both;
     padding:10px;
     background:#ff9; 
}