Can't change to the opposite value of "background-position"


I have some issue with changing to the opposite value of the background-position property.
As you know, if I want to change the value from Left to Right or Right to Left I can do this as you can see in this example:

background-position: [COLOR=#0000cd][B]0[/B][/COLOR] 10px; -> background-position: [COLOR=#ff0000][B]100%[/B][/COLOR] 10px;
background-position: [COLOR=#0000cd][B]right[/B][/COLOR] 10px -> background-position: [COLOR=#ff0000][B]left[/B][/COLOR] 10px;

But what is the opposite value of the following:

background-position: 5px 10px

(Because the pixels is relative to the left. how can I change it to be relative to the right?)


Welcome to Sitepoint, Scolpy.

I was having a similar issue years ago. I am afraid, if I am understanding your issue correctly that in CSS2.1 you just can’t to that. CSS3 promises to address this, but right now support is so limited it’s not worth mentioning it as a solution.

If you are positioning the bg image to the right and need space, in PX from the right edge, you can use a GIF/PNG add that # of transparent px to the right of the image, if your BG is a solid color, you can always match the BG color as well, in which case you can also use JPGs)

Of course, if you know the size of your container, you can just do math; position= container_size- (size_of_image+right_offset).

For now this is the the tried and true way of getting around this issue.

Hope that helped a little, at least