Need help loading an image over another image

[JohnSaunders]

Can somebody tell me what I'm doing wrong? For some reason the image that's being called in the CSS isn't loading over top of the image in the img tag.

.test {
  border: 1px solid #c00;
}

.over {
  background: transparent url("/images/over.gif" ) no-repeat;
  z-index: 2;
  width: 400px;
  height: 200px;
}

<p class="over"><a href="link.php"><img src="/images/me.jpg" width="400" height="200" class="test" /></a></p>

This is driving me nuts!

[tenfingers]

This is just a stab, but might you try to load the images in reverse?

I don't have a lot of experience with z-index, though I know its purpose, but one wonders if it even applies to background images?

I suspect the z-index property is being applied to the image element, and not the background.

[Paul O'B]

Can somebody tell me what I'm doing wrong? For some reason the image that's being called in the CSS isn't loading over top of the image in the img tag.

Hi,

I'm not sure what you are trying to do but background images are in the background and html elements are in the foreground. Your background image will therefore be under the image in the html.

If you want them the other way around then just reverse the images as suggested above. However I wonder what you are trying to do. If you are trying to make a rollover then you can just hide the image in the anchor on rollover and let the image that is in the background of the p show through.

You can manipulate the stacking order of elements using z-index but the elements have to have a position declared before the z-index takes effect. However you should not be able to put a child image under the background of its parent (although some browsers will let you do this with negative margins, but the specs have been changed so this shouldn't be alllowed.) The elements would need to have different stacking contexts (ie not nested) and then the z-index will take affect correctly.

If you could explain what you were trying to do exactly then it may be easier to offer specific code

Paul

[tenfingers]

You could also use CSS to swap the background image on rollover. Here are some experiments I've been working on:

http://www.tenfingers.net

Their behaviors are unpredictable in different browsers, so it will be necessary to give them a good working over before putting anything like these into production.

This does not preclude what Paul has said above.

[JohnSaunders]

Thanks for the help guys. I ended up getting it to work using two different divs. I put the image I wanted to appear over top of the photo using the background CSS property in the div following the img tag and got it to work.