CSS: Background image and padding

You can use percent values:

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

Not pixel perfect, but…

You can be more precise with CSS background-origin:

background-origin: content-box;

This will make image respect the padding of the box.

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>