Left and Right Hand Background

I would like to change the background on the following page:

http://howdra.sevenstone.ae/

...to have the left-hand part of the background floated to the left of screen, and the right-hand part floating to right of screen. The fixed width content in the middle is *to remain*.

At present the background is fixed width and in the centre of the screen.

Here is a rough mockup of the desired, scalable, outcome:

http://images.echohealth.me/hmc_demo.jpg

How can this be done in XHTML/CSS without tables...?
webstudiointeractiveAsked:
Who is Participating?
 
alien109Connect With a Mentor Commented:
Sorry. Missed that you wanted the body as well. Here's another solution. You'll need to adjust the margins and widths based on the gfx that you've got.

Essentially you'll need the following assets:

left header image
center header image (logo?)
right header image
left content image
right content image

you could use a background image in the content container as well, if you so desire.

tested in IE7 and FF, but nothing else.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
	<meta http-equiv="Content-Language" content="en-us" />
 
	<title>BG test</title>
 
	<style type="text/css">
 
	body {
		/* background:url(bl.png) repeat-y; */
		margin:0;
		padding:0;
	}
 
	#wrapper {
		text-align:center;
	}
 
	#header-wrapper {
		padding:0;
		margin:0;
		background:url(bc.png) no-repeat center;
		height:128px;
	}
 
	#header_l {
		background:url(hl.png) no-repeat left;
		height:100%;
		width:130px;
		float:left;
	}
 
	#header_r {
		background:url(hr.png) no-repeat right;
		height:100%;
		width:130px;
		float:right;
	}
 
	#content-wrapper1 {
		background:url(bl.png) repeat-y left;
	}
 
	#content-wrapper2 {
		background:url(br.png) repeat-y right;
	}
 
	#content {
		text-align:left;
		margin-left:130px;
		margin-right:130px;
	}
 
	</style>
 
</head>
<body>
 
<div id="wrapper">
	<div id="header-wrapper">
		<div id="header_l"></div>
		<div id="header_r"></div>
	</div>
	<div id="content-wrapper1">
		<div id="content-wrapper2">
			<div id="content">
				<br />
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel lorem sed lectus facilisis vulputate. Quisque justo libero, iaculis quis, dignissim vel, fermentum eget, nibh. Proin quis tellus id nunc fringilla condimentum. Phasellus dictum imperdiet lectus. Pellentesque rhoncus.</p>
			</div>
		</div>
	</div>
</div>
 
</body>
</html>

Open in new window

0
 
alien109Commented:
<style>
#header-wrapper {
      background:url(hc.gif) no-repeat center;
      height:147px;
}

#header_l {
      background:url(hl.gif) no-repeat;
      height:100%;
      width:268px;
      float:left;
}

#header_r {
      background:url(hr.gif) no-repeat;
      height:100%;
      width:268px;
      float:right;
}
</style>
</head>
<body>

<div id="header-wrapper">
      <div id="header_l"></div>
      <div id="header_r"></div>
</div>

you'll need to create three images hl (for the left), hr (for the right) and hc (for the center)
0
 
qwerty021600Commented:
Create a Fixed width DIv and place it at the center.
0
Upgrade your Question Security!

Your question, your audience. Choose who sees your identity—and your question—with question security.

 
webstudiointeractiveAuthor Commented:
Thanks for both replies so far,

@alien109: looks like it could work for the header, but not for the main content area as that uses a text container div.

@gwerty: the left background and right background will be a variable distance from each other depending on window size / screen resolution, so fixed width bg is not an option.
0
 
alien109Commented:
Here's the same thing with the nav bar as indicated in your screenshot. See the attached source. FYI - you'll need to rename index.txt to index.html in the zip file after decompressing. It won't let me attach a zip file that contains and html file!
liquid-bg.zip
0
 
webstudiointeractiveAuthor Commented:
Almost there. How can we get the "content" container to be fixed width?
0
 
alien109Connect With a Mentor Commented:
easy enough.

change the content style declaration to this (substitute in desired with, of course)

      #content {
            text-align:left;
            margin:0 auto;
            width:800px;
      }
0
 
webstudiointeractiveAuthor Commented:
The method is logical and works well. All makes sense after a good night's sleep! Thank you.
0
All Courses

From novice to tech pro — start learning today.