Fixed width centered layout with two background images

HTML & CSS
1

Hi all. I have a fixed width centered layout:


#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.

2

Are you trying to do this with CSS3 or with a background image? If the latter, this is quite easy (although the image would have to be quite large).

Using an image, just create the image but make sure that the darker area’s right side finishes 220px to the right of the center of the image (in Photoshop, for example). Then just center the image on the background. :slight_smile: