Div overlay headache! Trying to overlay image with html

[fidgen]

I think this is a Friday afternoon one - my brain seems to be cheese!

I'm trying to overlay part of my header with 50px of the content div. The content div has a background image and the overall effect should be that the bgimage pokes into the header.

And I can't do it ^^

Here's the relevant bits of the code -

Note that each section of the page has it's own wrapper so that it can have a repeat-x background.

If you put this into a test page, the banner overlays the content bgimage, not the other way round.

Thanks for any suggestions!

	
	<div id="header">
		<div id="menu"><img src="images/menu.jpg" width="980" height="97"/></div>
		<div id="banner"><img src="images/banner.jpg" width="980" height="400"/></div>
	</div>

	<div id="bgimage">
	  <div id="content">
			<div class="block_left">
				<h1>Lorem ipsum dolor sit amet</h1>
			</div>
		  	<div class="block_middle">
				<p style="text-align:justify; margin-bottom:20px;">Lorem ipsum dolor sit amet</p>
			  	<p style="text-align:justify">Lorem ipsum dolor sit amet</p>
			</div>
			<div class="block_right">
				<p style="text-align:justify">Lorem ipsum dolor sit amet</p>
			</div>
			<div style="clear:left"></div>
		</div>
	</div>

	<div id="footer1">
		<div id="footer_pink">
			<br /><br /><br />
		</div>
	</div>
	<div id="footer2">	
		<div id="footer_purple">
			<br /><br /><br />	
		</div>
	</div>
	<div id="legalstuff">Privacy Policy | Terms of Use | Accessibility Policy</div>

#header	{
	margin-top:0;
	margin-bottom:0;
	margin-left:auto;
	margin-right:auto;
	width:980px;
	height:500px;
}
#menu	{
	width:980px;
	height:97px;
	background-color:green;
}
#banner	{
	width:980px;
	height:400px;
	background-image:url(images/bg_banner.jpg); 
	background-repeat:repeat-x;
	z-index:2;	
}
#bgimage	{
	margin-top:-50px;
	margin-bottom:0;
	margin-left:auto;
	margin-right:auto;
	width:1094px;
	height: 100%;
	background-image:url(images/bg_content.png);
	z-index:3;
}
#content	{
	width:980px;
	margin-left:64px;
	height: 538px;
	background: transparent;
	z-index:4;	
}
.block_left	{
	float:left;
	width:280px;
	margin-left:50px; 
	margin-top:150px;
	z-index:5;	
}
.block_middle	{
	float:left;
	width:390px;
	margin-top:50px;
	margin-right:10px;	
	z-index:5;		
}
.block_right	{
	float:left;
	width:180px;
	margin-top:50px;	
	z-index:5;	
}
#footer1	{
	clear:both;
	width:100%;
	background-color:#ffdce8;	
}
#footer_pink	{
	width:980px;
	margin:0 auto;
	background-color:#ffdce8;
}
#footer2	{
	clear:both;
	width:100%;
	background-color:#702a68;	
}
#footer_purple	{
	width:980px;
	margin:0 auto;	
	background-color:#702a68;
}
#legalstuff	{
	width:980px;
	margin:0 auto;	
	background-color:#ffffff;
}

[SB65]

Looks like nobody else wants a stab at this one so I'll have a go.

Try adding:

position:relative;

to your css for #bgimage. Z-index won't work without it.

[fidgen]

Hmm that didn't work i'm afraid.

I've gone back to complete basics to try and understand the problem - I've literally just got 2 divs, one with a flash file and one with a bgimage.

I'm trying all sorts of combinations but i'm damned if I can get the bgimage of the overlay div to display on top of the flash!

Is it even possible? I guess flash is rendered seperate to html in the DOM?

[abduraooft]

Your intention is not clear from the above posted code. Could you post a link to your page and reexplain on the basis of that.

[fidgen]

Wait...

Wait...

Colleague has just pointed out that flash needs the wmode parameter! Guess what... everything works

Turns out my markup was spot on, just the flash needs the transparancy property.