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?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

EJC9999Commented:
Use Z-index to bring REST on top of MAIN.
0
EJC9999Commented:
0
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
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
error77Author Commented:
Thanks
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.