Desplazar una imagen de fondo desde la derecha usando CSS

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

Por ejemplo, para colocar algo con 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 de CSS3:

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

Por lo que sé, esto no es compatible con IE8. En la última versión de Chrome / Firefox, funciona bien.

Consulte ¿Puedo usar para obtener más información sobre los navegadores compatibles?

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

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

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

Nop.

Las soluciones populares incluyen

  • establecer un margin-right en el elemento en su lugar
  • agregar píxeles transparentes a la imagen y colocarla en la top right
  • o calculando 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 estabas buscando ya que pediste la precisión de píxeles, pero si solo necesitas algo para tener un pequeño espacio entre el borde derecho y la imagen, darle a algo una posición del 99% generalmente funciona bastante 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, vea las otras respuestas a esta pregunta.

CSS3 ha modificado la especificación de background-position de background-position para que funcione con diferentes puntos de origen. Lamentablemente, no puedo encontrar ninguna evidencia de que esté implementado aún en ninguno de los principales navegadores.

http://www.w3.org/TR/css3-background/#the-background-position Vea 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é porque la función CSS3 de especificar compensaciones propuestas en la respuesta marcada como resolver la pregunta aún no es compatible en los navegadores. P.ej

La respuesta más adecuada es la nueva syntax 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 … además de IE (soporte de navegador) . Aunque esa página enumera> = IE9 como compatible, mis pruebas no concuerdan con eso.

Puede usar la propiedad calc () css3 como tal;

 .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 preguntas, harías esto;

Tienes tu contenedor DIV llamado #main-container y .my-element que 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 practicar el uso de clases si hace referencia a un elemento de nivel inferior dentro de una página (supongo que usted es el cambio de mi 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 está en Chrome 21 (aparentemente IE9 los admite en parte, pero yo no lo he probado)

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

Si tiene elementos proporcionados, podría 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 que la estándar.

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

Si desea utilizar esto para agregar flechas u otros íconos a un botón, por ejemplo, entonces podría usar css pseudo-elementos?

Si es realmente 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:

 Read more 

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. Usted podría hacer lo mismo simplemente agregando un elemento span o dentro del elemento a. Pero creo que esta es una manera más limpia de agregar íconos a los botones y es compatible con varios navegadores.

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

Usa el centro a la derecha como 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 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 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, se establece en 100-300-10 = -210 px:

 #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 los enlaces de navegación con el texto debajo de la imagen.

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

Mi problema era que necesitaba la imagen de fondo para mantener la misma distancia desde el borde derecho cuando la ventana cambia de tamaño, es decir, para tableta / móvil, etc. Mi solución es usar un porcentaje así:

 background-position: 98% 6px; 

y se queda en su lugar.

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

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

 background-position: 100% 0px;