html - Placing box and text over image z-index -

i want place box , text within box on image.

i've managed place text on image can see on screenshot below:

by using code:

#wrap {     position:relative;      width: 200px;       height: 145px;     border: 1px solid grey }    #text { z-index:100;     position:absolute;         color:black;     font-size:20px;     font-weight:bold;     left:10px;     top:115px; } 

and calling function this:

<div id="wrap">     <img src="/wp-content/uploads/2014/03/brandslang.png"/>     <div id="text">brand</div> </div> 

i'd add box around text this:

i of course have change text color white etc. , idea have text box black , change opacity of box make see thru that.

however i'm not sure how add box, tried setting background of #text black didn't work ended painting box around text. i'm not sure how able change texts position using option.

so hoping guys me! :)

since using position absolute try :

#text {     z-index: 100;     position: absolute;         color: white;     font-size: 20px;     font-weight: bold;     padding: 10px;     left: 0;     right: 0;     bottom: 0;     background: rgba(0,0,0,.4); } 

an example : http://jsfiddle.net/hqc3f/