Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    Apr 2005
    Posts
    24
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Div overlay headache! Trying to overlay image with html

    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!

    Code:
    	
    	<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>


    Code:
    #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;
    }

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,957
    Thanks
    9
    Thanked 727 Times in 721 Posts
    Looks like nobody else wants a stab at this one so I'll have a go.

    Try adding:

    Code:
    position:relative;
    to your css for #bgimage. Z-index won't work without it.

  • #3
    New Coder
    Join Date
    Apr 2005
    Posts
    24
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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?

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,863
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    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.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #5
    New Coder
    Join Date
    Apr 2005
    Posts
    24
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.


  •  

    Tags for this Thread

    Posting Permissions

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