SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    0 Post(s)
    0 Thread(s)

    fixed width centered layout with two background images

    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.
    “Good artists copy, great artists steal” (Pablo Picasso - 1934)

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Melbourne, AU
    460 Post(s)
    8 Thread(s)
    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.


Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts