Compensar 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 a la derecha de su elemento?
Por ejemplo, para posicionar 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 yo sé, esto no es compatible con IE8. En la última versión de Chrome/Firefox funciona bien.
Consulte ¿Puedo usarlo para obtener detalles sobre los navegadores compatibles?
Fuente utilizada: http://tanalin.com/en/blog/2011/09/css3-background-position/
Actualizar :
Esta función ahora es compatible con todos los navegadores principales, 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 a la derecha de su elemento?
No.
Las soluciones populares incluyen
- estableciendo a
margin-righten 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 sencilla es utilizar porcentajes. Esta no es exactamente la respuesta que estaba buscando ya que solicitó precisión de píxeles, pero si solo necesita algo que tenga un poco de relleno 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 está implementado en los principales navegadores; consulte las otras respuestas a esta pregunta.
CSS3 ha modificado la especificación background-positionpara 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 Consulte el ejemplo 12.
background-position: right 3em bottom 10px;
Como se propone aquí , esta es una bonita solución para varios navegadores 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 las compensaciones propuestas en la respuesta marcada para resolver la pregunta aún no es tan compatible con los navegadores. P.ej
