overlay background images not showing up

I开发者_Go百科'm trying to create rounded images (fixed width in this situation, so I just want to use an overlay png) but the corner overlay does not seem to be showing up.

The mark-up looks like this:

 <div class="rounded roundTop">
     <div class="rounded roundBottom">
         <img />
     </div> 
 </div>



.rounded {
    position: relative;
    z-index: 99;
}

.roundTop{    
    background: transparent url('../@gui/round-img-top-155.png') top left no-repeat; 
}

.roundBottom{
    background: transparent url('../@gui/round-img-bottom-155.png') bottom left no-repeat;   
}

img {  
    width: 155px;
    padding-right: 12px;
    position: relative;
    z-index: 1;

The .rounded divs appear to be in the right place, but their backgrounds aren't showing up and I'm not sure as to why!

Here is a jsfiddle

I try assigning a solid background color to the container divs and they go under the image despite their z-index.

I can get the borders in front of the image by sending the image itself to the back, but then it gets covered by all the other elements in the page.

---

You need to remove the z-index from the container elements and just set a negative z-index on the image, see here.

---

I assume they're not showing up at all? I'd venture to guess it's because of your url. I don't think "@" is a valid character to use in file names (if it is, it's not really good practice).

A good way to check to make sure the browser is finding the file is to open up the browser's developer tools (for Firefox, you'll need to install Firebug; the others are built in), and look at the CSS view. You should be able to click on or hover over the URL and see if it loads a preview (I know that works in Firebug, I think it works in the others, if not, you should be able to tell by whether it's downloaded the file in the download view).

Beyond that, a live link or a jsfiddle would help.

---

This will fix it:

.roundBottom{
    padding: 18px 0px;
    background: transparent url('http://ctrlshiftweb.com/round-img-bottom-155.png') bottom left no-repeat;
}

You need to take into account the height of the image. :D