html - H1 見出しの背景画像

Question

私のワードプレスのテーマページの見出しに<?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

背景画像を直接配置することも、repeat-x で背景画像を使用することもできますが、ページ タイトル テキストのスパン幅が常に固定されません。各ページには異なるページ タイトルが付いています。

したがって、2 つの画像部分を使用したいと思います。

このようにして、任意のページ タイトル テキストの矢印イメージを取得できます。どうすればこれを入手できるか教えてください。