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