Ok, I am pretty experienced at CSS but at this point I am at a loss.

I layed out how I want the title to look like in photoshop:

however, the closest I can approach it with css is:

I need the black background to extend to the edges of the image and padding on the right side of the title.

I hope you understand my question! thanks.

here is the html:

    <div class="glossary_image">
    <img src="<?php echo $custom_fields['image'][0]; ?>" />
    <div class="title">
        <h2><?php the_title(); ?></h2>
    </div>
</div>

and the css:

.glossary_image {
    position: relative;
    height: 300px;
    width: 300px;
    margin-top:10px;
    margin-bottom: 10px;
}

.glossary_image .title {
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 10px;
}

.glossary_image .title h2 {
    display: inline;
    font-family:Arial, Helvetica, sans-serif;
    font-size: 30px;
    font-weight:bold;
    line-height: 35px;
    color: #fff;
    text-transform:uppercase;
    background: #000;
}