how to z-index parent's background

So here is what I'm trying to do.

<div class="gallery">
<a href="link_to_large_image.jpg" style="z-index:2; position:relative; background: url(roundedcorners.jpg) norepeat;">
<img src="thumbnail.jpg" style="z-index:1; position:relative;" />
</a>
</div>

In the gallery I'm trying to place <a> (and its background) tag which is the parent of the <img> tag on top with the z-index. So that way I can add rounded corners to the images.

But looks like no matter what I do it places the background o开发者_StackOverflow中文版f the <a> (which is the rounded corners) under the image.

Any one know the fix? Here is the link http://ewsbuild.com/~markdemi/gallery.html

If you want rounded corners on images, just do:

.lightbox{
    border-radius:15px;
    -moz-border-radius:15px;
}

You can change the radius and what elements it affects of course.

Place a Div inside the a tag and apply the following styling to each div.

background: url("images/gallery/Giallo-Sienna-Fireplace.jpg") no-repeat scroll 0 0 transparent;
border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
height: 153px;

The problem is twofold:

• When you raise the z-index of the a you raise the z-index of its children too, so that you're effectively not doing anything by doing this. Lowering the z-index of the img tag should do it.
• z-index only applies to positioned elements. So you need to add position:relative to anything you add a z-index to (assuming it doesn't already have a position of course).