background image is not displayed - css

Question

this is my html code inside the page
<style type="text/css">
.container{width:100%;}
.left{float:left;}
.right{float:right;}
.center{margin:0 auto;}
</style>
<ul class="invite container" >
<li class="container">
<span class="left">
<img src="images/main-bride.jpg" height="200px" />
</span>
<span class="frame right">
<img src="images/main-groom.jpg" height="200px" />
</span>
<!-- <span class="center" background="images/frame.png"> hello</span> -->
</li>
<!-- <li class="right">
<span class="frame"><img src="images/main-groom.jpg" height="200px" /></span>
</li> -->
</ul>
and this is the css code:
.frame {
display: block;
line-height: 0px;
background: url(../images/frame.png) no-repeat center center;
}
.frame img {border: 10px solid #fff;}
everything else is working is find but only the background image is not visible. any thing that I'm missing? plz help.

Answer 1

IF Your background should be 10px around the image, than the white border of the image and the image is hiding it.
Try to add:
.frame {display: block; padding: 10px; background-repeat: repeat;}
.frame img {border: 0px;}
And check if the background is visible "around" the image. Remember that frame.png can be small and still hidden under the image. You must be carefull to adjust all the sizes correct.
Few words of explanation: In that case, You are setting padding on the parent element, so there will be 10px space from each side of the image. In that case 10px frame will be seen from the .frame element, and the image will cover the center of it.
If You want the background to overwrite the image, use:
.frame img {display: none;}
.frame {display: block; height: ...px; width: ...px;}
Why downvote? It would be nice to write something, thx.

Answer 2

is that css for the background in a file one level up from the index page or inline on the index page ? your css for the background url says
background: url(../images/frame.png) no-repeat center center;
background: url(.. go up one level
/images/ down into images folder
frame.png find the file called frame.png
) no-repeat center center;
check your paths.