Обтекание фона заголовка

Question

Хорошо, я довольно опытный в CSS, но на данный момент я в растерянности.

Я выложил, как я хочу, чтобы заголовок выглядел в фотошопе:

альтернативный текст http://screensnapr.com/u/qz26q5.png

однако, ближе всего я могу подойти к нему с помощью css:

альтернативный текст http://screensnapr.com/u/s7xi7a.png

Мне нужен черный фон для расширения до краев изображения и отступов справа от заголовка.

Надеюсь, вы понимаете мой вопрос! спасибо.

вот HTML:

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

и 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

Вы могли бы сделать изображение фоном элемента div, выполнив это, позиционирование наложения не должно быть проблемой.

Answer 2

Удалите padding из .glossary_image .title и добавьте padding-right: 10px; к .glossary_image .title h2.
Вы также можете добавить padding-top к h2.