user966582 user966582 - 17 days ago 4
CSS Question

CSS: Background image and padding

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

You can use percent values:

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

Not pixel perfect, but…