CSS: Background image and padding

Question

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:

HTML:

<ul>     <li>Hello</li>     <li>Hello world</li> </ul> 

CSS:

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

I know we can set the image position by pixels, but since each of the li has different width, I can't do that.

Here's JSFiddle link: http://jsfiddle.net/QeGAd/1/

Answer 1

You can be more precise with CSS background-origin:

background-origin: content-box; 

This will make image respect the padding of the box.

Answer 2

You can use percent values:

background: yellow url("arrow1.gif") no-repeat 95% 50%; 

Not pixel perfect, but…