Coloque la imagen de fondo 1em desde la derecha?

Question

Por lo que puedo decir, no es posible colocar una imagen de fondo CSS 1em desde el borde derecho de ningún bloque, tampoco es posible colocar una imagen 1em desde la parte inferior.

El siguiente código coloca la imagen de fondo 1em desde la izquierda y 2em desde la parte superior.

<div class="foo" style="background: url('bar.png') no-repeat 1em 2em"> 
    Some text here 
</div> 

¿Hay alguna manera en el CSS para especificar que la imagen de fondo debe ser "tan lejos desde el borde derecho" si el tamaño de la caja es dinámico y suponiendo que no se puede cambiar el código HTML?

(En porcentajes no funcionarán, ya que la caja se puede cambiar el tamaño)

Si esto no es posible, ¿cuál es la más pequeña cantidad de cambio que necesita para hacer que el código HTML?

Esta es la solución que se me ocurrió:

<style> 
div.background 
{ 
    float: right; 
    background: url('bar.png') no-repeat top left; 
    margin-right: 1em; 
    width: 16px; 
    height: 16px; 
} 
</style> 
<div class="foo"> 
    <div class="background" style="">&nbsp;</div> 
    Some text here 
</div> 

Answer 1

Después de algunas investigaciones la longitud real de píxeles x de la posición de fondo es siempre contados desde el lado izquierdo del elemento. La única manera de hacer este trabajo (sin necesidad de utilizar otros elementos) sería el uso de JavaScript, calcular la longitud dada dados los elementos Ancho:

var rightMargin = "10"; // in pixels 
var imageWidth = "16"; 
var left = element.style.clientWidth - imageWidth - rightMargin; 

element.style.backgroundPosition = "0px " + left + "px"; 

Answer 2

Usted podría intentar algo como esto:

<style type="text/css" media="screen"> 
    #outer { 
     position: relative; 
     top: -1em; 
     left: -1em; 
     margin: 1em 0 0 1em; 
     outline: thin solid #F00; 
     background: url(http://i.stackoverflow.com/Content/Img/stackoverflow-logo-250.png) no-repeat 100% 100%; 
    } 
    #inner { 
     outline: thin solid #0F0; 
     position: relative; 
     top: 1em; 
     left: 1em; 
    } 
</style> 

<div id="outer"> 
    <div id="inner"> 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
    </div> 
</div> 

Editar: Esperamos CSS 3 background-position.

Answer 3

Elementos con posición: absoluta; puede ser posicionado por su borde derecho. lo tanto, si no te importa un pequeño cambio en el código HTML, haga lo siguiente:

<div id="the-box"> 
    <img id="the-box-bg" src="bar.png" /> 
    Text text text text.... 
</div> 
(...) 
#the-box { 
    position: relative; 
} 
#the-box-bg { 
    position: absolute; 
    right: 1em; 
    z-index: -1; 
} 

Por supuesto podría usar también la posición absoluta de un segundo div, con un fondo de repetición. Pero luego tendría que establecer el tamaño del div (interno) en CSS.

Answer 4

El CSS3 background-position spec le permite cambiar el punto de anclaje de la esquina superior izquierda a cualquier opción que desee. Por ejemplo, el siguiente configurará la esquina inferior inferior del 1 em imagen de la derecha y de la parte inferior 2px:

background-position: right 1em bottom 2px; 

confirmó a trabajar en:

IE9/10, Firefox 13+, Chrome 26+, Opera 11+, Seamonkey 2.14+, Lunascape 6.8.0

A partir de abril de 2013, solo IE6-8 y algunos navegadores periféricos carecen de soporte.

Aquí hay una página de prueba: http://jsbin.com/osojuz/1/edit