Arrange an image on top

[Stinger]

Hi there

Hopefully you can understand what im trying to explain here!

I have a transparant image that i want to be able to place as a background but have it on top of text and other elements on my page, giving the see through affect.

I read a little about z-index but i cant see to get that to work, can someone give me a quick run down on what i might need to do to achive this.



Thanks
Ryan.

[Schmoopy]

Some code would be nice to have something to work with or a link to your site.

But yes, it sounds like z-index will need to be used here.

Say you have two divs one called "main" and another called "transimage"

Then in the CSS you could have:

#main{
z-index:10;
}
#transimage{
z-index:50;
}

The transimage would then take precedence and appear on top of main if they were positioned in the same place.

[Nile]

Yup. Take a look at this screen cast.

[Stinger]

Hey guys,

Thanks for the quick replies.

I have had a quick play around with this, i think i might have an issue with the way im using the css (its hard to explain) but in my css file i have the following.

.bg{
  background:(url../images/sidebar_bg.gif) no-repeat bottom left;
  z-index:50;}

And i call it in a td like this

<td class="bg">

It doesnt work but i noticed you used #bg in the css instead of .bg which i used. I tried using #bg and calling it with <div id="bg">

But i will keep working on it!


Thanks
Ryan

[Nile]

@Schmoopy You need to give it a position

@Stinger Use .bg, and call it with <div class="bg">
Except in the CSS, add:

position: relative;

[Schmoopy]

Yes forgot about that, main cause of z-index not working is if the element isn't positioned, (e.g. static), so make sure you have it either position:relative or position:absolute and it should solve the problem.

[Stinger]

Thanks very much everyone!

[Nile]

Glad to help you Stinger! 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"