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>