user966582 user966582 - 3 months ago 24
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:


<li>Hello world</li>



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:


You can use percent values:

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

Not pixel perfect, but…