Edit on
<div class="test one"></div>

<div class="test two"></div>

<div class="test three"></div>
.test {
  margin: 20px;
  border: 1px solid #ccc;
  width: 50px;
  height: 50px;
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/star_1.png);
  background-size: 20px 20px;
  background-repeat: no-repeat;
}

.one {
  background-position: right -10px bottom 10px;
}
.two {
  background-position: calc(100% + 10px) calc(100% - 10px);
}
var el = $(".three"),
    bgWidth = 20,
    bgHeight = 20;

el.css({
  "background-position": (el.width()-bgWidth+10) + "px " + (el.height()-bgHeight-10) +  "px"
});
Rerun