CSS background-position calculated from left? I want it RIGHT - css

Question

I need to allocate some background image to a certain div, the thing is it needs to be positioned from right and not the usual left in CSS. So when defining background-position, it can read, say , right, or some big percentage (which is also calculated from the left side of the screen but anyway works) and.. that's it. I cannot use pixels and get it to go with a fix distance from the right side of its container. Am I right here? So, is there a work-around for this? Anything to do with LESS if that helps? Theoretically, I can have it set to right and somehow decrease a couple of pixels then.
We have margin-right:+-px, padding-right:+px, but not background-position-right:+-px ?

Answer 1

background-position: right 20px;
https://developer.mozilla.org/en-US/docs/CSS/background-position
JSBIN example: http://jsbin.com/ixejey/1/
UPDATE:
Oops, I may have misunderstood the question. The above positions the background image to the right side and 20px from the top--but not a set distance away from the right side. I don't think you can do that at this time with CSS alone.
For now what you could do is instead of using a background image on the element directly, wrap the element inside a wrapper div, then add a second div to hold the "background" image and position it absolutely--which you can do from the right a specific distance.
Example of the alternative option:
<div id="yourContainer">
<div id="yourBackGroundImage"></div>
<div id="yourContent">your content</div>
</div>
css:
#yourContainer {
position: relative;
}
#yourBackGroundImage {
width: 100;
height: 100;
position: absolute;
right: 50px;
}

Answer 2

The first value (calc(100% - 0%)) is the horizontal position and the second value (calc(100% - 10%)) is the vertical. The top left corner is 0% 0%. The right bottom corner is 100% 100%. If you only specify one value, the other value will be 50%. . Default value is: 0% 0%
<div id="hero-content"></div>
CSS
#hero-content{
background-position:
calc(100% - 0%) /* 0px from the right */
calc(100% - 10%) /* 10% from the bottom */
}

Answer 3

<div id="background"></div>
and
#b {
height:100%;
width:100%;
background: ; //put background style here
}