overlap image with css

[beho86]

Hello ,
Here's my current css file:



body { margin:114px 0 0 0; line-height:16px; font-family: Tahoma, Arial; background: url(images/body_top_bckg.jpg) no-repeat center top #171c20; color:#bed7e6; font-size:11px;}
a { color:#018BC1;}
a:hover { text-decoration:none;}
#header {}
a:active, a:focus {outline: 0;}
#logo { padding:0px 0 50px 0;color:#fff; text-align:center;}
#logo a{ color:#fff; text-decoration:none; font-weight:bold; font-size:24px; text-transform:uppercase; }
#menu {color:#fff; text-align:center; margin-bottom:55px;}
#menu ul {text-align:center;list-style:none; padding:0;}
#menu ul li {display:inline}
#menu ul a { font-weight:bold; font-size:14px; text-decoration:none; color:#fff; background-color:#445d6c; padding:0 10px 2px 10px;}
#menu ul a:hover { background-color:#f26513;}
#main {background: url(images/body_all_bckg.jpg) repeat-y top center;}
#content {width:780px; margin:0 auto;}
#text { width:520px;}
#text p { margin:7px 0 7px 0;}
#text li {}
#sidebar {float:right; width:227px; background-color:#0b0e10; margin:10px 10px 0 0; }
#sidebar_top { width:227px; height:40px; background:url(images/sidebar_top.jpg) no-repeat;}
#sidebar_text { padding: 0 30px;}
#sidebar_text p { margin:5px 0 5px 0;}
#sidebar_bottom { width:227px; height:57px; background:url(images/sidebar_bottom.jpg) no-repeat;}
#sidebar h2 { font-size:13px; text-transform:uppercase; color:#fff; margin:20px 0 0 0; padding:0; background:none;}
h1 {margin:30px 0 0 0; padding-left:45px; text-transform:uppercase; font-size:24px; color:#fff; background:url(images/h1_bckg.jpg) no-repeat; line-height:normal;}

#footer {background:url(images/footer_bckg.jpg) no-repeat 100% 100%; height:180px; clear:both; width:780px; margin:0 auto; }
#left_footer { float:left; padding:10px 0 0 10px; color:#fff; font-size:12px;}
#left_footer a { color:#fff;}
#left_footer a:hover { text-decoration:none;}
#right_footer { float:right; padding:60px 30px 0 0; color:#fff; font-size:12px; text-align:right;}
#right_footer a { color:#fff;}
#right_footer a:hover { text-decoration:none;}
------------------------------------------------------------------------

I need to add (hide) an image behind the first image (body_top_bckg.jpg) , without missing any of the overall format???

Thanks in advance,

[Nile]

Take a look at this video:
http://css-tricks.com/video-screencasts/40-how-z-index-works/

[beho86]

Hello Nile,
I was watching the z-intex vid, thank you so much, I actually start understanding how the css positioning works.
I have a question:
in my css style file:

body { margin:114px 0 0 0; line-height:16px; font-family: Tahoma, Arial; background: url(images/body_top_bckg.jpg) no-repeat center top #171c20; color:#bed7e6; font-size:11px; }

I want to hide an image behind the body_top_bckg.jpg?

The current code in html:

<script type="text/javascript" src="http://www.examples.com"></script><a href="http://www.example.com/" target="_blank">
<img src="http://examples/trace.gif" alt=" Tracker" border="0" /></p>

HERE is what I did:


body { margin:114px 0 0 0; line-height:16px; font-family: Tahoma, Arial; position:relative; z-index:1; background: url(images/body_top_bckg.jpg) no-repeat center top #171c20; color:#bed7e6; font-size:11px; }


#badge {position: absolute; left:550px; top:100px; z-index:9000; background:url(http://examples/trace.gif);}

and in html:


<div id="badge">
<script type="text/javascript" src="http://www.examples.com"></script><a href="http://www.example.com/" target="_blank">
<img src="http://examples/trace.gif" alt=" Tracker" border="0" /></p>

It did position the image, but the trace.gif is over the the other!!! I changed the values of the z-index, it didn't move!!
What should I do??

Thanks in advance,

[Nile]

Make sure trace.gif is positioned absolute or relatively.

[beho86]

It's absolute by the css #badge , I am not sure if I am doing the right thing.

[Nile]

Try:


<img src="http://examples/trace.gif" alt=" Tracker" border="0" style="position: relative"/></p>

[beho86]

That what I already have:

<div id="badge">
<script type="text/javascript" src="http://www.example.com"></script><a href="http://www.example.org/" target="_blank"><img src="http://example.com/trace.gif" style="position: relative" alt="Tracker" border="0" /></p>

When I use the badge , which is defined in css, as stated previuosly to have the lowest z index, it still appear over the background.

I need it to be behind it?!

Thanks in advance,

[beho86]

Finally it did work, I used a class and I included z-index to be -1000, and it worked!!

Thakns Nile for your help.

[Nile]

Glad to help you! Your welcome!

It seems your topic is solved... Please set the status to resolved.. To do this:
Go to your first post ->
Edit your first post ->
Click "Go Advanced" ->
Then in the drop down next to the title, select "RESOLVED"