How can I put a background image at an absolute distance to the right of its container?

Question

I can put a small background image / image in 4 pixels from the center to the left of its container:

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

How can I put it 4 pixels to the right?

Answer 1

Depending on your situation and which 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 have already set the border on the right, this will not help you.

Added to edit: If the above does not work, because you are using a border, and you do not care that IE7 (not sure if we are at that moment), and your width of the "icon" is known, then you can 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

What about

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

in case you need a border

Answer 3

, , .

:

• 4px background-position: right

• 4px margin-right ( , )

• jQuery (yuck!)

Answer 4

CSS3 background-position:

background-position: right 10px top 50%;

10px .

Answer 5

, :

table.dataTable thead .sorting_asc {
  background: url("http://cdn.datatables.net/1.10.0/images/sort_asc.png") no-repeat 30% 50%;
}
table.dataTable thead .sorting_desc {
  background: url("http://cdn.datatables.net/1.10.0/images/sort_desc.png") no-repeat 30% 50%;
}
table.dataTable thead .sorting {
  background: url("http://cdn.datatables.net/1.10.0/images/sort_both.png") no-repeat 30% 50%;
}

Hide result