How can I position a background-image an absolute distance from the right of its container?

Question

I can position a small background-image/icon 4 pixels from the center left of its container with:

background: url(...) no-repeat 4px 50%;

How can I position it 4 pixels from the right?

Answer 1

Depending on your situation and what browsers you want to support, this works (tested on IE7-8, Firefox):

background: url(...) no-repeat right 50%; border-right: 4px solid transparent;

Of course, if you are already putting a border on the right, this will not help you at all.

Added on edit: If the above doesn't work because your are using the border, and you don't care about IE7 (not sure we are quite at that point yet), and your "icon" width is known, then you could do:

.yourContainer {
  position: relative;
}

.yourContainer:after {
  content: ' '; 
  display: block; 
  position: absolute; 
  top: 0; 
  bottom: 0; 
  right: 4px; 
  width: 10px; //icon width
  z-index: -1; //makes it act sort of like a background
  background: url(...) no-repeat right 50%;
}

Answer 2

CSS3 adds a new way to specify background-position:

background-position: right 10px top 50%;

Should position the background-image 10px from the right and vertically centered.