title: CSS: Background image and padding
body: <p>I want to add a background image on the right side of the list items, and want to have some padding from the right side as well, but I'm unable to do that. Please have a look at following example:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;ul&gt;
      &lt;li&gt;Hello&lt;/li&gt;
      &lt;li&gt;Hello world&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>ul{
      width:100px;  
  }
  
  ul li{
      border:1px solid orange;
      background: url("arrow1.gif") no-repeat center right;
  }
  
  ul li:hover{
       background:yellow url("arrow1.gif") no-repeat center right;
  }
  </code></pre>
  
  <p>I know we can set the image position by pixels, but since each of the li has different width, I can't do that. </p>
  
  <p>Here's JSFiddle link:
  <a href="http://jsfiddle.net/QeGAd/1/">http://jsfiddle.net/QeGAd/1/</a></p>