title: CSS - background image repeat x from a starting point
body: <p>I have an h2 that I am trying to fit with a 2px background image. I want the image to begin after the words in the h2, and then repeat-x for the remainder of the space in the h2. Since words lengths vary, I can't simply put a static image in the html.</p>
  
  <p>I can get the background image in just fine and repeating along the x-axis. But the image goes behind the text, which I don't want. </p>
  
  <p>Is there a way to either 1. start the image repeating from right after the text, or 2. accomplish this task in a better way?</p>
  
  <p>Here is a <a href="http://jsfiddle.net/78qqW/" rel="nofollow">jsfiddle</a> for what I have so far.</p>
  
  <p>... and the accompanying code:</p>
  
  <pre><code>h2{
  
  color:#253b74;
  font-size:16px;
  background-image:url('http://s8.postimg.org/ke8tx8jhd/hr_03.png');
  background-repeat:repeat-x;
  background-position:100% 50%;
  
  }
  </code></pre>
  
  <p>and html:</p>
  
  <pre><code>&lt;h2&gt;PRODUCT IMAGE&lt;/h2&gt;
  </code></pre>