background-position con referencia de derecha a izquierda

[ZyZtemA]

Titulo erroneo, debe ser ".. referencia de derecha a izquierda", perdón. Si algún admin pudiese corregirlo, mil gracias.

Hola,

Tengo un pequeño problemilla que destroza mi mente a estas horas. Estoy utilizando una imagen de fondo para cada TD de una tabla. Este imagen de fondo se encarga de generar bordes a todas las celda de la tabla, según un estilo en el cual juego con el background-position. El motivo de desarrollar esto y no usar CSS directamente es por que se necesita exportar a PDF, y los bordes que se generan al hacer el PDF no son de mi gusto, son bastante toscos. Por lo cual opte por colocar una imagen de fondo de 1px, para que así me respetara realmente el grosor de este.

Bueno, el problema es que tengo clases para las esquina y valores centrales, cada uno coloca un borde distinto (arriba, bajo, izquierda, derecha), pero cuando intenté hacer la clase para el último TD de un TR, por ejemplo una esquina superior derecha, no logré hacer que encajara como yo quisiera. Los bordes de la imagen son de 1px, pero aún así en el background-position tengo que ocultar 1px, ya que el generador de PDF me "agranda" la imagen un px. Por ejemplo este es el CSS de una esquina superior izquierda de mi tabla:

Código HTML:

.ArIzq {

	background-image: url(../imagenes/bordesPDF/bordeEntero.png);
	background-position: -1px -1px;

}

Ahí, adjunto el fondo y le digo que me lo corra 1px hacia arribia y hacia el costado, de este modo el PDF me queda realmente con 1px de borde en las tablas. Pero el problema como dije antes es con las esquinas derechas o lados derechos de una tabla, ya que no puedo utilizar posiciones absolutas (px) para indicar donde tiene que ir el fondo, porque estos estilos se utilzarán para muchas otras tablas que no tienen el mismo largo de TD obviamente.

Entonces, me entró la duda ¿es posible de algún modo indicar un background-position pero con referencia de derecha a izquierda?, o si alguien simplemente conoce alguna solución o algún truco que me ayude en esto.

Cabe destacar que no puedo utilizar Javascript en esto, de lo contrario otra sería la historia.

Saludos y gracias.

[kseso?]

Hola Zyztema:
Hablamos en base a css2.1, ¿ok? Porque css3 incluye algunas novedades en el tema de los fondos.
Antes de nada resaltar una pequeña diferencia entre navegadores a la hora de colocar un fondo. Los navegadores ponen el fondo debajo del borde (Opera, FF...), los emuladores (ie) lo colocan a partir del borde. De ahí puede venir esa necesidad de tu px negativo.

Si utilizas la forma "background-image: url(bordeEntero.png);" no puedes utilizar B-position. Por defecto se repite pero cubriendo toda la caja. Reitero que hablamos de css 2.1.

Si optas por un repeat-x o repaeat-y, la repetición la hará en toda la coordenada indicada, y lo único que puedes alterar es el punto de la otra coordenada donde se realizará la repetición. Pero cubrirá toda la altura (si R-y) o toda la anchura (si R-x). Y curiosamente, si la repetición la haces sin desplazarla, en el eje repetido, su borde queda excluido, no así en el otro eje.

Como no dices cuál es la estructura que utilizas, sólo puedo especular que si tan necesario es la imagen para un borde de 1px, quizás se pudiese lograr lo mismo con cajas (div's) de 1px de anchura y jugando con su posición. Sin entrar en otros temas que lo justifiquen o lo desaconsejen.

Un saludo

[ZyZtemA]

Gracias por tu respuesta!

Hablamos ciertamente en bases a CSS2. Fuera de que es CSS2 el convertidor a PDF que utilizo (Prince) me da un soporte para ciertos elementos CSS, por lo cual me tengo que restringir a lo que soporta el convertidor.

Para mi el tema del repeat no es mucho cuento, ya que la imagen es bastante grande y de ahí a que se repita sería en escasas ocasiones. La idae es que nunca se repita.

Imagina lo siguiente, esta es mi imagen con fondo transparente

Código:

 ------------------------
|                        |
|                        |                       
|                        |                       
|                        |                       
 ------------------------

Para las esquinas superiores izquierdas muestro eso:

Código:

 ------------------------
|                        |
|                        |                       
|                        |                       
|                        |                       
 ------------------------

¿Cierto?, según mi CSS mostrará eso, corrido un px vertical y horizontalmente.

Pero cuando quiero mostrar la esquina superior derecha, está el problema. Puedo situar el borde justo donde yo quiero, pero sería hacer una clase para cada tamaño de TD.

También pense en utilizar un DIV y jugar con su posición para tapar el px "sobrante" en los TD del lado derecho de las tablas. Creo que tendré que optar por esa opción.