Small help with background please

Hey all,
I'm totally redesigning a website and want to upgrade its looks. If possible I'd like if someone could help me solve a problem:

I'm trying to add a background like on espn.com (grey, fading black and white where content goes).
But I wonder how they make it so it fits on every resolution. While working on it I figured I'd download their background and see what it does on my website without coding resolutions. You can see it on my website. Don't mind all the mistakes, I just copy-pasted one of my other websites and am only working on layout.

As you can see, the background isn't aligned properly with the content.

How would I go about making it fit?

Thanks for the help!

 

on your style.css just use a background-color: rather than background image...
you code:

body {
	background: url('./images/layout/bg_main_a.bmp');
	text-align: center;
	font-family: Arial, Helvetica, sans-serif;
	width:1000px;
	font-size:11px;
	margin-left:0px;
	margin-right:0px;
}

Code (markup):

try changing with this code:

body {
	background-color: #4b4b4b;
	text-align: center;
	font-family: Arial, Helvetica, sans-serif;
	width:1000px;
	font-size:11px;
	margin-left:0px;
	margin-right:0px;
}

Code (markup):

this will fix your background problem..

 

No, it won't, because it'll fill the background instead of having the fading effect around the edges.

 

ahhh.. you mean the shadow?? it can be done in photoshop... you have the body {background-color} and #container that has {background-image} which has shadow style in the edges with repeat-y attribute...

 

Thanks, I'll try that.
Just to make sure I understood:
Fill the background with grey color, create a shadow/fade img and add it to the container's css class?