Here are a few things that should help:

1. First off, you need to center your background image:
   

   body{ background: #000 url('http://img380.imageshack.us/img380/2965/testvy4.jpg') center repeat-y fixed; }

2. The space between your background borders is around 1175px... that's huge if you want it to show up on lower resolution monitors. Maybe you can leave that for your higher resolution setting (keep reading).
   
   
3. To make your site work with different resolutions, try using this theme selector and make a theme named "1024x768" and one named "1440x900". You can then change the background image and then use this CSS to adjust the size of your left and right column boxes (I picked 200px but you can put whatever)
   
   .LeftContentZone {width:200px;}
   .RightContentZone {width:200px;}
   
   
   

Oh, sorry I guess I should have explained better.

Since you're only changing the background and column size width, that's all you need in the extra CSS that loads. And I forgot to include the page width too... 

1440x900.css

.PageWrapper {width:1180px;}
.LeftContentZone {width:200px;}
.RightContentZone {width:200px;}
body{ background: #000 url('http://img380.imageshack.us/img380/2965/testvy4.jpg') center repeat-y fixed; }

1024x768.css

.PageWrapper {width:850px;}
.LeftContentZone {width:175px;}
.RightContentZone {width:175px;}
body{ background: #000 url('http://img168.imageshack.us/img168/8965/1024copybm4.jpg') center repeat-y fixed; }

Using "PageWrapper" will also limit the size of your expanding banner, so if that isn't want you want, then replace "PageWrapper" with "ctl00_ContentPlaceHolder1_ContentTable"

Ok, I figured out the problem... I actually hadn't tested the CSS until now *hang head*

It all needs an "!important" after the width to make it work. I also adjusted the size a tiny bit to make it bit better. Just remember, all that needs to be in the CSS files below is what you see, leave the CSS in the custom stylesheet alone.

1024x768.css

.resize {max-width:400px;}
.PageWrapper {width:840px !important;}
.LeftContentZone {width:175px !important;}
.CenterContentZone {width:490px !important;}
.RightContentZone {width:175px !important;}
body{ background: #000 url('http://img168.imageshack.us/img168/8965/1024copybm4.jpg') center repeat-y fixed;}

1440x900.css

.resize {max-width:700px;}
.PageWrapper {width:1150px !important;}
.LeftContentZone {width:200px !important;}
.CenterContentZone {width:750px !important;}
.RightContentZone {width:200px !important;}
body{ background: #000 url('http://img380.imageshack.us/img380/2965/testvy4.jpg') center repeat-y fixed; }

And you'll need to make a couple of changes to the images in the middle. The Congrats image and the monthly schedule image need to reduce in size to fit the "Normal Screen" size. All you have to do is add class="resize" into the img tag, see the examples below. I added the resize definition into the CSS of both files above.

<img class="resize" src="http://img255.imageshack.us/img255/3654/gratsod8.png">

<img class="resize" src="http://img126.imageshack.us/img126/9062/septse4.png">

I tested it this time and I know it works now! LOL

I don't know what editor program you're using, but it's adding line breaks into your css

.resize {max-width:700px;}<br>
.PageWrapper {width:1150px !important;}<br>
.LeftContentZone {width:200px !important;}<br>
.CenterContentZone {width:750px !important;}<br>
.RightContentZone {width:200px !important;}<br>
body{ background: #000 url('http://img380.imageshack.us/img380/2965/testvy4.jpg') center repeat-y fixed; }

That's the problem I believe... since you're using ripway, just edit the file on that site

Edit: Here try linking to the files I made to test it...

http://h1.ripway.com/Mottie/test/1024x768.css

http://h1.ripway.com/Mottie/test/1440x900.css