<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"
});
External CSS
This Pen doesn't use any external CSS resources.