Announcement

**ericTheGoldfish** · Sep 25, 2006, 04:49 PM

Put each of the rows into a div tag and add the images to the backgound of each of the div tags

**Erindesign** · Sep 25, 2006, 05:22 PM

That works, if I only wanted to show the background. How do I put my content table on top of that?

**Erindesign** · Sep 25, 2006, 09:01 PM

Okay, no response yet. Must mean I am not explaining myself well, or this is impossible.

Here is a better idea/view: http://www.imagemule.com/uploads/bckThVO.gif

A: Background Image. No repeat.
B: Background Image. Repeat X.
C: Content.

The B will be a long pattern image. It repeats on the X to make up for the width, but the height will just be the length of the image. It seems easy in theory but it's giving me a headache.

Please anyone, help!

**ericTheGoldfish** · Sep 26, 2006, 08:50 AM

I would create a div tag around all three spaces (A, B & C). Add your background images to A & B. Then create a third div tag for area C (adding another background if needed) and use the position, left and top css properities to move the C area over the two others. I have done this quickly and it works ok in firefox:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<title>Untitled Document</title>
	<style type="text/css">
		body {
			font-size: 100%;
			font-family: Verdana, Arial, Helvetica, sans-serif;
		}
		
		* {
			margin: 0;
			padding: 0;
		}
		
		div#outline {
			width: 780px;
			margin-top: 10px;
			margin-left: auto;
			margin-right: auto;
		}
		
		div#a {
			background-color: #000066;
			height: 100px;
		}
		
		div#b {
			background-color: #3366CC;
			height: 350px;
		}
		
		div#c {
			background-color: #666;
			color: #fff;
			font-size: 0.8em;
			height: 300px;
			width: 500px;
			position: relative;
			top: -400px;
			margin-left: auto;
			margin-right: auto;
			padding: 10px;
		}
	</style>
</head>

<body>
<div id="outline">
	<div id="a"></div>
	<div id="b"></div>
	<div id="c">This is the content div tag</div>
</div>
</body>
</html>

**rmedek** · Sep 26, 2006, 03:39 PM

I think there are a few easier ways (bg image on the body, one in a wrapper, one for the content), but without seeing the actual images it's hard to say.

Truthfully, I don't think you've thought this out enough—what happens when the browser window is wider than image A? Or taller than image B? If the images have set widths and heights then there's no reason to add all the other containers and bg images.

The thing that's always helped me when designing a tricky background layout is to try and think about the behavior of the design rather than the layout. The layout always seems to take care of itself at that point.

With that in mind, do you have a screenshot of the design you are going for? Maybe at different sizes (i.e., maximised, 800x600, etc)?

**Arbitrator** · Sep 27, 2006, 01:41 AM

Just nest three elements and set their background images in the order C, A, and B. Example:

Code:

CSS:
html {min-height: 100%; background: url("c.png") 0 430px;}
body {min-height: 100%; background: url("a.png") no-repeat;}
#container {height: 100%; background: url("b.png") 0 400px repeat-x;}

HTML:
<html>
  […]
  <body>
    <div id="container"></div>
  </body>
</html>

Announcement

Repeated & Non-repeated Background

Repeated & Non-repeated Background

Comment

Comment

Comment

Comment

Comment

Comment