css - texto - Cómo establecer la posición de fondo a una distancia absoluta, comenzando desde la derecha?

posicionar imagen css

Question

Quiero establecer una imagen de fondo para un div, de una manera que esté en el DERECHO superior del div, pero con una distancia fija de 10px desde arriba y desde la derecha.

Aquí es cómo lo haría si lo quisiera en la parte superior IZQUIERDA de la div:

background: url(images/img06.gif) no-repeat 10px 10px;

¿Hay alguna forma de lograr el mismo resultado, pero mostrando el fondo en la parte superior DERECHA?

Answer 1

Hay algunas maneras en que puedes hacer esto.

1. Haz los cálculos tú mismo, si es posible. Ya sabes las dimensiones de tu imagen. Si conoce las dimensiones del div, puede simplemente poner la imagen en (ancho div - ancho de la imagen - 10, alto del div - altura de la imagen - 10).

2. Use Javascript para hacer el trabajo pesado por usted. Prácticamente el mismo método que el anterior, excepto que no necesita conocer las dimensiones del div en sí mismo. Javascript puede decirte.

3. Una forma más hackish sería colocar un borde transparente de 10 píxeles alrededor de la parte superior e inferior de la imagen y establecer la posición en la top right .

Answer 2

Puedes usar porcentajes:

background: url(...) top 98% no-repeat;

Si conoce el ancho del div principal, debería ser bastante fácil determinar qué porcentaje necesita usar.

Answer 3

Una solución es posicionar absolutamente un div vacío, y darle ese fondo. No creo que haya una forma de hacerlo puramente con CSS, sin cambios en la imagen y sin marcado adicional en un diseño fluido.

Answer 4

Use la regla mencionada anteriormente junto con un margen superior y derecho:

background: url(images/img06.gif) no-repeat top right;
margin-top: 10px;
margin-right: 10px;

Las imágenes de fondo solo aparecen dentro del relleno, no en los márgenes. Si agregar el margen no es una opción, puede que tengas que recurrir a otro div, aunque te recomiendo que solo lo utilices como último recurso para tratar de mantener tu marcado tan reducido y semético como sea posible.

Answer 5

El formato correcto es:

background: url(YourUrl) 0px -50px no-repeat;

Donde 0px es la posición horizontal y -50px es la posición vertical.

background-position CSS acepta valores negativos.

Answer 6

En Firefox, IE9 y Opera 10.5 puede usar una sintaxis de cuatro valores, especificada en CSS3 :

background-position: right 10px top 10px;

Fuente: MDN

Answer 7

No sé si es posible en CSS puro, así que puedes probar

background: url(images/img06.gif) no-repeat top right;

y modifique su imagen para incorporar un borde de 10px en la parte superior e izquierda en un color transparente

Answer 8

Puede falsificar el espacio en el lado derecho con un borde en píxeles (blanco la mayor parte del tiempo o tal vez algo más)

  background-image: url(../images/calender.svg) center right
  border-right: 5px white solid