Title Background Wrapping

Question

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;
}

Answer 1

Remove the padding from .glossary_image .title and add padding-right: 10px; to .glossary_image .title h2.
You might also want to add padding-top to the h2.

Answer 2

You could make the image the background of a div element, by doing this the overlay positioning should be no problem.