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/

You can be more precise with CSS background-origin:

background-origin: content-box;

This will make image respect the padding of the box.

You can use percent values:

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

Not pixel perfect, but…

Use CSS background-clip:

background-clip: content-box;

The background will be painted within the content box.

Use background-position: calc(100% - 20px) center, For pixel perfection calc() is the best solution.

ul {
  width: 100px;
}

ul li {
  border: 1px solid orange;
  background: url("https://placehold.co/200x125/e16d65/FFFFFF/png") no-repeat calc(100% - 10px) center;
}

ul li:hover {
  background-position: calc(100% - 20px) center;
}

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

You can achieve your results with two methods:-

First Method define position values:-

HTML

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

CSS

    ul{
    width:100px;    
}

ul li{
    border:1px solid orange;
    background: url("http://www.adaweb.net/Portals/0/Images/arrow1.gif") no-repeat 90% 5px;
}


ul li:hover{
    background: yellow url("http://www.adaweb.net/Portals/0/Images/arrow1.gif") no-repeat 90% 5px;
}

First Demo:- http://jsfiddle.net/QeGAd/18/

Second Method by CSS :before:after Selectors

HTML

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

CSS

    ul{
    width:100px;    
}

ul li{
    border:1px solid orange;
}

ul li:after {
    content: " ";
    padding-right: 16px;
    background: url("http://www.adaweb.net/Portals/0/Images/arrow1.gif") no-repeat center right;
}

ul li:hover {
    background:yellow;
}

ul li:hover:after {
    content: " ";
    padding-right: 16px;
    background: url("http://www.adaweb.net/Portals/0/Images/arrow1.gif") no-repeat center right;
}

Second Demo:- http://jsfiddle.net/QeGAd/17/

The only option to actuall have this made pixel perfect is to create some transparent padding within the GIF itself. That way you can actually align it to the right of the LI and still have the background padding you are looking for.

You can just add the padding to tour block element and add background-origin style like so:

.block {
  position: relative;
  display: inline-block;
  padding: 10px 12px;
  border:1px solid #e5e5e5;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-origin: content-box;
  background-image: url(_your_image_);
  height: 14rem;
  width: 10rem;
}

You can check several https://www.w3schools.com/cssref/css3_pr_background-origin.asp

setting direction CSS property to rtl should work with you. I guess it isn't supported on IE6.

e.g

<ul style="direction:rtl;">
<li> item </li>
<li> item </li>
</ul>

Adding box-sizing: content-box seems to also work. Note that you may have to adjust the height, width, and background-size to account for padding with this method.