CSS DIV and Image Transparency

Hi all,

I have the following layout:

<div>Header Here</div>
<div id="main">Main here ... with BG Image Floated Right and height on 500px</div>
<div id="rest">Rest of the page
<div>Content Here</div>
</div>

Me problem is that the BG image at "main" is over id="main" ... I need the BG image to be below id="rest" and now above as it seems to be.

Anyone have any ideas on how to sort this please?

Thanks
error77Asked:
Who is Participating?
 
andrewkhanCommented:
Hi Error77,

Try this:

<div style="position: relative;">
<div>Header Here</div>
<div id="main">Main here ... with BG Image Floated Right and height on 500px</div>
<div id="rest">Rest of the page
<div>Content Here</div>
</div>


#main {
position: absolute;
z-index: -100;
}

I have added a container div set to position: relative, allowing you to use absolute position and then set the z-index of the main div to -100. Remember you will now have to adjust the container div CSS for say, centering the page.
0
 
EJC9999Commented:
Use Z-index to bring REST on top of MAIN.
0
 
EJC9999Commented:
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
LZ1Commented:
Can you show a live URL or some CSS code?  Z-index generally applies to absolute positioned elements.  If your MAIN element or image elements aren't positioned absolutely, z-index may not work.

A live URL example would work as well, if not better.  
0
 
error77Author Commented:
Sorry, there's no live URL of it. Using it locally. So what do you do in the case where the div positioning is not absolute?
0
 
error77Author Commented:
Thanks
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.