Фоновое изображение для заголовка H1

Question

В моем заголовке темы Wordpress <?php the_title(); ?>.

Мой Css:

#page h1.pagetitle { 
     width:auto; 
     text-align:left; 
     font-size:30px; 
     padding:25px 40px 25px 0px; 
     text-transform:uppercase; 
    } 

    #page h1.pagetitle span{ 
    background:#202020; 
    padding:5px 40px 5px 10px; 
    } 

Html:

<h1 class="pagetitle"><span><?php the_title(); ?></span></h1> 

Я хочу фоновое изображение как стрелки ленты, как этот образец http://www.123rf.com/photo_12816420_green-arrow-ribbon-on-wooden-desk.html

я могу поместить фоновое изображение непосредственно или с помощью фонового изображения с повтором -x. Но моя ширина заголовка текста заголовка страницы не является фиксированной. Каждая страница имеет разный заголовок страницы.

Поэтому я хочу использовать две части изображения : один с прямоугольным текстом с использованием repeat-x и : второй со стрелкой (треугольной) сразу после окончания текстовой строки.

таким образом я могу получить изображение стрелки для любого текста заголовка страницы. Предложите мне, как я могу это получить?

Answer 1

Я использую эту технику много:

h1{ 
    background: url('http://i49.tinypic.com/2zs1z79.png') 0 0 repeat-x; 
    position:relative; 
    display: inline-block; 
    margin:0 25px; 
    padding:0 10px; 
    height:40px; 
} 

h1:before,h1:after { 
    content:''; 
    display: inline-block; 
    position:absolute; 
    top: 0; 
    right: -20px; 
    width: 20px; 
    height: 100%; 
    background:inherit; 
    background-position:100% 100%; 
} 
h1:before { 
    left:-20px; 
    background-position: 0 100%; 
} 

:before я использую и :after для головы и хвоста и спрайта для изображения. Это хорошо, чисто и гибко (достаточно).

демо: http://jsfiddle.net/pavloschris/5Qvn7/