Desplaza una imagen de fondo desde la derecha usando CSS

¿Hay alguna manera de colocar una imagen de fondo a una cierta cantidad de píxeles desde la derecha de su elemento?

Por ejemplo, para colocar algo a una cierta cantidad de píxeles (digamos, 10) desde la izquierda , así es como lo haría:

#myElement {
    background-position: 10px 0;
}

Encontré útil esta característica CSS3:

/* to position the element 10px from the right */
background-position: right 10px top;

Hasta donde sé, esto no es compatible con IE8. En el último Chrome / Firefox funciona bien.

Ver ¿Puedo usar? para obtener detalles sobre los navegadores compatibles?

Fuente utilizada: http://tanalin.com/en/blog/2011/09/css3-background-position/

Actualización :

Esta característica ahora es compatible con todos los principales navegadores, incluidos los navegadores móviles.

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

¿Hay alguna manera de colocar una imagen de fondo a una cierta cantidad de píxeles desde la derecha de su elemento?

No

Las soluciones populares incluyen

• establecer un margin-right en el elemento en su lugar
• Agregar píxeles transparentes a la imagen misma y posicionarla top right
• o calcular la posición usando jQuery después de conocer el ancho del elemento.

La solución más fácil es usar porcentajes. Esta no es exactamente la respuesta que estaba buscando, ya que solicitó precisión de píxeles, pero si solo necesita algo para tener un poco de relleno entre el borde derecho y la imagen, dar algo a 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 desactualizada: ahora se implementa en los principales navegadores, consulte las otras respuestas a esta pregunta.

CSS3 ha modificado la especificación de background-positionmodo que funcione con diferentes puntos de origen. Desafortunadamente, no puedo encontrar ninguna evidencia de que esté implementado todavía en ninguno de 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 solución de navegador cruzado que funciona perfectamente:

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

Lo utilicé ya que la función CSS3 de especificar las compensaciones propuestas en la respuesta marcada como resolver la pregunta aún no es compatible con los navegadores. P.ej

La respuesta más apropiada es la nueva sintaxis de cuatro valores para la posición de fondo, pero hasta que todos los navegadores lo 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 es mantenible, pero hace el trabajo.

Esto funcionará en la mayoría de los navegadores modernos ... aparte de IE (soporte de navegador) . Aunque esa página enumera> = IE9 como compatible, mis pruebas no estuvieron de acuerdo con eso.

Puede 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 uso una alternativa de usar border-right: 10px solid transparent;para IE.

Ok, si entiendo lo que estás pidiendo, harías esto;

Tiene su contenedor DIV llamado #main-containery .my-elementeso está dentro de él. Use esto para comenzar;

#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 (supongo que, por lo tanto, mi cambio de nombre es anterior.

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

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

Si tiene elementos proporcionados, puede usar:

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

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

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

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

Si desea usar esto para agregar flechas / otros íconos a un botón, por ejemplo, ¿podría usar pseudoelementos css?

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

background-position: right 0;

Pero si tengo que agregar, 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;
}

Al usar el selector: after, agrego un elemento usando CSS solo para contener este pequeño icono. Puede hacer lo mismo simplemente agregando un lapso o<i> elemento 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

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

usa el centro a la derecha como la posición y luego agrega un borde transparente para compensarlo?

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

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

#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 20 píxeles a la derecha.

Sé que puede sonar estúpido, pero a veces ahorra tiempo ... Lo uso 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 cambia el tamaño de la ventana, es decir, para tableta / móvil, etc. Mi solución es usar un porcentaje de este modo:

background-position: 98% 6px;

y se queda en su lugar.

¡si! bien para colocar una imagen de fondo como si fuera 0px desde el lado derecho del navegador en lugar de la izquierda - yo uso:

background-position: 100% 0px;