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

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
}