Hi all. I have a fixed width centered layout:

Code:
#wrapper {
	width: 100%;
	min-height: 100%;
	margin: -90px auto 0;
	font-size: .75em;
}

#content {
	width: 1000px;
	margin: 0 auto;
	position: relative;
	z-index: 5;
}

#content .content {
	width: 720px;
	padding: 30px 0;
	float: left;
}

#content .sidebar {
	width: 260px;
	margin: 0;
	padding: 30px 0;
	float: left;
	border-left: 20px solid #FFF;
}
The thing I can't figure is a 100% width background for the body which exists of two different gradients where the left hand gradient should go from 0% from the view port to 720px within #content and the right hand gradient from 720px within #content to 100% of the view port. Here you can see an example of what I mean, where the red lines left and right represent #content div.

Thank you in advance.