First I'd change all the div id's to classes so you can re-use your code throughout the page and make it more flexible.
@srekoble's answer is really good but I might do something like this.
CSS:
.wrap {
position:relative;
width: 200px;
height: 145px;
border: 1px solid grey;
}
.backbox {
z-index:100;
position:absolute;
min-height: 30px;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,.7);
}
.text {
z-index:999;
color:#fff;
font-size:20px;
font-weight:bold;
}
HTML:
<div id="wrap">
<img src="/wp-content/uploads/2014/03/brandslang.png"/>
<div id="text">Brand</div>
</div>
http://jsfiddle.net/JtLbB/
This example allows you to style your text and background boxes differently and by using CSS classes you can apply it to more boxes throughout the site. ID's should always be unique.