Desplazar una imagen de fondo desde la derecha usando CSS

!! Respuesta obsoleta, ya que CSS3 trajo esta característica

¿Hay una manera de posicionar una imagen de fondo un cierto número de píxeles desde la derecha de su elemento?

No.

Las soluciones más populares incluyen

• establecer un margin-right en el elemento en su lugar
• añadiendo píxeles transparentes a la propia imagen y posicionándola top right
• o calculando la posición usando jQuery después del ancho del elemento es conocido.

La solución más fácil es usar porcentajes. Esta no es exactamente la respuesta que estabas buscando ya que pediste precisión de píxel, pero si solo necesitas algo que tenga un poco de relleno entre el borde derecho y la imagen, darle a algo una posición del 99% generalmente funciona lo suficientemente bien.

Código:

/* aligns image to the vertical center and horizontal right of its container with a small amount of padding between the right edge */
div.middleleft {
  background: url("/images/source.jpg") 99% center no-repeat;
}

Respuesta obsoleta: Ahora está implementado en los principales navegadores, ver el otras respuestas a esta pregunta.

CSS3 ha modificado la especificación de background-position para que funcione con diferentes puntos de origen. Desafortunadamente, no puedo encontrar ninguna evidencia de que se implementa todavía en los principales navegadores.

Http://www.w3.org/TR/css3-background/#the-background-position Véase el ejemplo 12.

background-position: right 3em bottom 10px;

Como se propone aquí , esta es una bonita solución de navegador cruzado que funciona perfectamente:

background: url('/img.png') no-repeat right center;
border-right: 10px solid transparent;

Lo usé ya que la característica de CSS3 de especificar compensaciones propuestas en la respuesta marcada como resolver la pregunta aún no está soportada en los navegadores. Por ejemplo,

La respuesta más apropiada es la nueva sintaxis de cuatro valores para la posición en segundo plano, pero hasta que todos los navegadores la admitan , su mejor enfoque es una combinación de respuestas anteriores en el siguiente orden:

background: url(image.png) no-repeat 97% center; /* default, Android, Sf < 6 */
background-position: -webkit-calc(100% - 10px) center; /* Sf 6 */
background-position: right 10px center; /* Cr 25+, FF 13+, IE 9+, Op 10.5+ */

Un truco simple pero sucio es simplemente agregar el desplazamiento que desea a la imagen que está utilizando como fondo. no se puede mantener, pero hace el trabajo.

Esto funcionará en la mayoría de los navegadores modernos...aparte de IE (soporte del navegador) . A pesar de que la página lista >= IE9 como compatible, mis pruebas no están de acuerdo con eso.

Puedes usar la propiedad calc() css3 así;

.class_name {
    background-position: calc(100% - 10px) 50%;
}

Para mí esta es la forma más limpia y lógica de lograr un margen a la derecha. También utilizo una alternativa de usar border-right: 10px solid transparent; para IE.

Ok Si entiendo lo que usted pide que haría esto;

Tienes tu contenedor DIV llamado #main-container y .my-element que está dentro de él. Usa esto para empezar;

#main-container { 
  position:relative;
}
/*To make the element absolute - floats above all else within the parent container do this.*/
.my-element {
  position:absolute;
  top:0;
  right:10px;
}

/*To make the element apart of elements, something tangible that affects the position of other elements on the same level within the parent then do this;*/
.my-element {
  float:right;
  margin-right:10px;
}

Por cierto, es mejor usar clases si hace referencia a un elemento de nivel inferior dentro de una página (asumo que es por lo tanto mi cambio de nombre anterior.

La especificación CSS3 que permite diferentes orígenes para la posición de fondo ahora es compatible con Firefox 14, pero todavía no en Chrome 21 (al parecer IE9 en parte los soporta, pero no he probado yo mismo)

Además de la cuestión de Chrome que @ MattyF hizo referencia hay un resumen más sucinto aquí: http://code.google.com/p/chromium/issues/detail?id=95085

Si tienes elementos proporcionados, puedes usar:

.valid {
    background-position: 98% center;
}

.half .valid {
    background-position: 96% center;
}

En este ejemplo, .valid sería la clase con la imagen y .half sería una fila con la mitad del tamaño de la estándar.

Sucio, pero funciona como un encanto y es razonablemente manejable.

Si desea usar esto para agregar flechas / otros iconos a un botón, por ejemplo, ¿podría usar pseudo-elementos CSS?

Si realmente es una imagen de fondo para todo el botón, tiendo a incorporar el espaciado en la imagen, y solo uso

background-position: right 0;

Pero si tengo que añadir por ejemplo una flecha diseñada a un botón, tiendo a tener este html:

<a href="[url]" class="read-more">Read more</a>

Y tienden a hacer lo siguiente con CSS:

.read-more{
    position: relative;
    padding: 6px 15px 6px 35px;//to create space on the right
    font-size: 13px;
    font-family: Arial;
}

.read-more:after{
    content: '';
    display: block;
    width: 10px;
    height: 15px;
    background-image: url('../images/btn-white-arrow-right.png');
    position: absolute;
    right: 12px;
    top: 10px;
}

Usando el selector: after, agrego un elemento usando CSS solo para contener este pequeño icono. Podría hacer lo mismo simplemente agregando un elemento span o <i> dentro del elemento a. Pero creo que esta es una forma más limpia de agregar iconos a los botones y es compatible con varios navegadores.

Puedes ver el violín aquí: http://codepen.io/anon/pen/PNzYzZ

¿Usar el centro a la derecha como posición y luego agregar un borde transparente para desplazarlo?

Si tiene un elemento de ancho fijo y conoce el ancho de su imagen de fondo, simplemente puede establecer la posición de fondo en : el ancho del elemento-el ancho de la imagen - el espacio que desea a la derecha.

Por ejemplo: con un elemento de 100px de ancho y una imagen de 300px de ancho, para obtener un espacio de 10px a la derecha, lo establece en 100-300-10= - 210px:

#myElement {
  background:url(my_image.jpg) no-repeat -210px top;
  width:100px;
}

Y obtienes los 80 píxeles más a la derecha de tu imagen a la izquierda de tu elemento, y un espacio de 20px a la derecha.

Lo sé puede sonar estúpido, pero a veces ahorra tiempo... Utilizo eso de manera vertical (espacio en la parte inferior) para enlaces de navegación con texto debajo de la imagen.

Sin embargo, no estoy seguro de que se aplique a su caso.

Mi problema era que necesitaba que la imagen de fondo se mantuviera a la misma distancia del borde derecho cuando se redimensiona la ventana, es decir, para tabletas / móviles, etc. Mi solución es usar un percentatge así:

background-position: 98% 6px;

Y se pega en su lugar.

¡Sí! bueno para posicionar una imagen de fondo como si 0px desde el lado derecho del navegador en lugar de la izquierda - utilizo:

background-position: 100% 0px;

background-position: calc(100% - 8px);