title: Background image for H1 heading
body: <p>In my wordpress theme page heading <code>&lt;?php the_title(); ?&gt;</code> .</p>
  
  <p>My Css: </p>
  
  <pre><code>#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;
       }
  </code></pre>
  
  <p>Html:</p>
  
  <pre><code>&lt;h1 class="pagetitle"&gt;&lt;span&gt;&lt;?php the_title(); ?&gt;&lt;/span&gt;&lt;/h1&gt; 
  </code></pre>
  
  <p>I want background image like arrow ribbon like this sample <a href="http://www.123rf.com/photo_12816420_green-arrow-ribbon-on-wooden-desk.html" rel="nofollow">http://www.123rf.com/photo_12816420_green-arrow-ribbon-on-wooden-desk.html</a></p>
  
  <p>I can place background Image directly or using background image with repeat-x.But My page title text span width is not fix at all the time. Each page is with different page title .</p>
  
  <p>So I want to use two Image portion 
  :one with  rectangular behind text using repeat-x and
  :second with arrow (triangular) just after end of text string.</p>
  
  <p>this way I can get the arrow image for any page title text.
  Suggest me how can I get this?</p>