Background image for H1 heading

Question

In my wordpress theme page heading <?php the_title(); ?> .

My 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> 

I want background image like arrow ribbon like this sample http://www.123rf.com/photo_12816420_green-arrow-ribbon-on-wooden-desk.html

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 .

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.

this way I can get the arrow image for any page title text. Suggest me how can I get this?

Answer 1

I use this technique a lot:

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%;
}

I use :before and :after for the head and the tail and a sprite for the image. It is nice, clean and flexible (enough).

demo : http://jsfiddle.net/pavloschris/5Qvn7/