[Bahus]

Исходный вариант:

PHP код:

.postHeader .postTitle span {
    background: rgba(0, 0, 0, 0) url("./images/heading.png") no-repeat scroll right 0;
    display: block;
    margin-right: -15px;
    padding: 8px 15px 7px;
}
.postTitle {
    color: #2d88b4;
    font-family: Verdana,Geneva,sans-serif;
    font-size: 14px;
    font-weight: bold;
} 


При увеличении шрифта заголовка

PHP код:

.postHeader .postTitle span {
    background: rgba(0, 0, 0, 0) url("./images/heading.png") no-repeat scroll right 0;
    display: block;
    margin-right: -15px;
    padding: 8px 15px 7px;
}
.postTitle {
    color: #2d88b4;
    font-family: Verdana,Geneva,sans-serif;
    font-size: 20px;
    font-weight: bold;
} 


Появляются несколько пикселей между верхней и нижней картинкой. Проявляется только если текст в две строки.
Если в css убрать

PHP код:

padding: 8px 15px 7px; 


Получается

Все плотно, однако текст смотрится как то не очень.

Части изображения берутся из одного файла

Она используется еще в 10 местах в css связанных с заголовком.

Код, где используется заголовок из примера

PHP код:

<div class="postHeader">
            <h2 class="postTitle"><span><a href="<?php the_permalink() ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></span></h2>
            <div class="bottom"><div>
                <span class="postDate"><?php the_time(get_option('date_format')); ?><?php
                    //Time
                    if($arjunaOptions['postsShowTime']) {
                        print _e(' at ', 'Arjuna'); the_time(get_option('time_format'));
                    }
                ?></span>
                <?php if($arjunaOptions['postsShowAuthor']): ?>
                <span class="postAuthor"><?php the_author_posts_link(); ?></span>
                <?php endif; ?>
                <?php if(!$arjunaOptions['comments_hideWhenDisabledOnPosts'] || ( 0 != $post->comment_count || comments_open() || pings_open() )): ?>
                <a href="<?php comments_link(); ?>" class="postCommentLabel"><span><?php
                    if (function_exists('post_password_required') && post_password_required()) {
                        _e('Pass required', 'Arjuna');
                    } elseif(0 == $post->comment_count && !comments_open() && !pings_open()) {
                        _e('Comments off', 'Arjuna'); 
                    } else {
                        comments_number(__('No comments', 'Arjuna'), __('1 comment', 'Arjuna'), __('% comments', 'Arjuna'));
                    }
                ?></span></a>
                <?php endif; ?>
            </div></div>
        </div>

Вопрос: что прописать в css, чтобы фон верхней части растягивался до нижней, чтобы можно было сделать отступы. Или нужно перерисовывать картинку?

[Vlad03]

Сейчас время css3, всё это можно сделать на css без всяких картинок и таких проблем. Если сами не можете стукните в скайп или в личку, помогу разобраться.