CSS problem

michaelp · 21 May 2012 at 21:57

Hey so I figured Ill show you how i have my div's set-up then tell you the problem.

Code:

<body>
<wrapper>
	<banner>
	</banner>
		<sub-wrapper>
			<left>
			</left>
			<content>
			</content>
		<sub-wrapper>
	<footer>
	</footer>
</wrapper>
</body>

Now obviously there all <div id="Name"> I just wanted to give you an idea of what's going on.

Code:

body
{
margin:0px;
padding:0px;
}

wrapper
{
background-image:url(banner image);
background-repeat:repeat-x;
}

banner
{
padding 
Under this header is actualy just a logo image link 
So in the CSS it just positions the image
}

sub-wrapper
{
width:990px;
border-right:2px solid #fe0000;
border-left:2px solid #fe0000;
}

footer
{
background-image:url(footer image);
background-repeat:repeat-x;
}

Now what I want to do is have background colour/image for the body/wrapper and for the inner wrapper to have a different background colour/image. But my header and footer images don't have straight lines in order to make it simple so I was wondering if I can layer it like you would in Photoshop or if there was some other method for doing this.

I tried putting the inner wrapper around the header and footer but the colour shows on top of the images instead of under.

Dj_Jestar · 21 May 2012 at 22:10

What?

Post actual markup and css please. Perhaps link to a site, or something like jsfiddle.net.

rhodeski · 21 May 2012 at 22:20

Or even upload an image of what you've got in photoshop.... Pics being worth a thousand words and all

michaelp · 21 May 2012 at 22:31

hahaha and I figured I explained it well.

So I want to be able to style the background and the middle content area that's 990px. The header and footer are transparent png's

Just when I try to style add colour it goes ontop of them when i want them under

uniQ · 21 May 2012 at 22:51

z-index

GaryH-21 · 23 May 2012 at 23:26

yep, z-index.

Set the div you want to have the background colour to:

z-index:-1;

and it will always appear behind the other divs, so the header/footer background images will be infront of the background.