imagen background en una celda

Sexma · #1 (**permalink**) 20/06/2003, 16:24

Hola:

Quiero poner en una celda una imagen de fondo y he puesto este codigo

<td colspan="3" style="background-image:url(imagenes/cutline.jpg)">

Pero lo que pasa es que el ancho de la celda es mas grande que el ancho de la imagen de fondo y por tanto la imagen se repite. Lo que quiero hacer es que en lugar de que se repita quiero estirarla hasta el tamaño de la celda tanto si es mayor como si es menor.

Gracias

caricatos · #2 (**permalink**) 21/06/2003, 01:42

Hola Sexma:

Creo que con estilos no se puede hacer...

Las respuestas que te puedo dar, son:
hacer que la imagen no se repita y salga centrada (con estilos)
background-repeat: no-repeat;
background-position: center center;

y la otra forma sería algo más complicado es poner posiciones absolutas en la celda y poner la imagen del tamaño de la celda, en la posición 0, 0...
Pero recuerdo haber hecho pruebas, y luego el contenido de la celda no se ajustaba bien...

Tal vez sea mejor que probases, y nos dijeses que vas a hacer.

Saludos

Bravenap · #3 (**permalink**) 21/06/2003, 02:09

Hola caricatos, no sé si fuiste tú el que puso no hace mucho un ejemplo en el que el fondo de una página se ajustaba al tamaño de la ventana. El fondo era una imagen y ésta se deformaba con el evento onResize. Lo he estado buscando pero no he conseguido encontrarlo. Quizás esto se pudiera adaptar a una celda.

Un saludo a los dos.

caricatos · #4 (**permalink**) 21/06/2003, 02:22

Hola otra vez:

Bravenap (hola

): Es cierto que yo hice algo así, pero quité mi directorio de pruebas, porque debo depurarlo.

De todos modos, este es el código:

Código PHP:

  <html>

<head>

<title>

    Fondo adaptable

</title>

<script language=javascript>

function ini()    {

    var elFondo = document.getElementById("fondo").style;

    var ancho = document.body.clientWidth;

    var alto =  document.body.clientHeight;

    elFondo.width = ancho;

    elFondo.height = alto;

}

</script>

 

</head>

<body style="margin:0" onload=ini() onresize=ini()>

<div style="position: relative">

<div style="position:absolute; top:0; left:0;">

<img src="FONDO.gif" id=fondo style="position: absolute;top:0; left: 0; width:0;left:0">

</div>

<div id=general style="align: center; position:absolute; top:0; left:0;">

<table border=1>

<tr>

<td >

Tabla sin importancia

</td></tr></table>

<div>

</div>

</body>

</html>

Sexma (Hola

): si te interesa adaptar este código, avisa, y te ayudamos.

Saludos

Sexma · #5 (**permalink**) 21/06/2003, 10:00

Cuando lo pruebe ya os dire a ver si lo he solucionado.

Bravenap · #6 (**permalink**) 21/06/2003, 10:15

Prueba, prueba. Yo me he tirado una hora intentándolo

y no lo he conseguido

. A ver si tienes más suerte.

Sexma · #7 (**permalink**) 21/06/2003, 10:25

Ya he estando haciendo pruebas y no consigo hacer que quede bien, lo de que no se repita y centrado esta bien pero aun necesito que se estire porque la celda es mas grande que la imagen. tambien es verdad que en temas de css estoy muy verde y eso de tamaño relativo y absoluto no lo controlo. Pero supongo que segun el codigo de caricatos para hacer eso pero en una celda seria coger el ancho y alto de la celda y ponerselo a la imagen, es eso? o estoy equivocado?

Por si quereis ver como es el problema mirar esta direccion

http://orienet.webcindario.com

Bravenap · #8 (**permalink**) 21/06/2003, 10:45

Te entiendo, el mismo problema he tenido yo.
Si no especificas previamente el tamaño de la celda (incluso con porcentajes) no se puede recoger este con Javascript, o al menos eso creo.

He intentado miles de conbinaciones: comprobar el tamaño que queda por fuera de la celda y luego restárselo al de la página, meter una capa sin contenido al final del texto y comprobar la distancia hasta el principio de la celda, meter una capa en la celda y otra tabla sobre esta, ....

Vamos, de todo lo que se me ocurría y sabía. Pero se resistía la condenada.

mmmmm...

¡Un momento! Ahora que veo tu página, la imagen que quieres que se deforme ¿es la de arriba a la izquierda, justo encima del menú? Me ha parecido ver, aunque le cuesta conectar, que cada vez que entras se carga una imagen diferente. Esta es la que me ha salido por última vez:

<IMG src="http://orienet.webcindario.com/imagenes/fotos/img_ouv3.jpg" border=0>

Como ves no tienes especificado un ancho y alto de la foto. Veo también que está hecho en PHP, no lo conozco, pero suponiendo que fuera en ASP y que lo sacas de un base de datos:

<img src="<%=RS("imagenes")%>" width="200" height="400">

Así sea cual sea la imagen que saques de la base de datos, o de una variable o de lo que sea, siempre tendrá un tamaño de 200x400, es decir, que se deformará si originalmente no tiene ese valor.

Olvídate entonces de ponerla como fondo de una celda, símplemente métela en la tabla y especifica su tamaño.

Espero que ahora se resuelvan los problemas y nos olvidemos del que prometía ser un engorroso Javascript.

De todas formas, si alguien se anima a currárselo....

Por cierto, a ver si la vemos pronto terminada, porque al menos para mí tiene contenidos que prometen ser interesantes. Eso sí, creo que le hace falta un título o una cabecera.

Un saludo.

tunait · #9 (**permalink**) 21/06/2003, 11:23

La imagen que tratas de estirar es esta?

caricatos · #10 (**permalink**) 21/06/2003, 12:15

Hola otra vez:

No sé si es lo que quieres, pero prueba con esto:

<html>
<head >
<script language=javascript>
function ini() {
var ancho = document.getElementById("control").clientWidth;
var alto = document.getElementById("control").clientHeight;

var elemento = document.getElementById("descontrol").style;
elemento.margin = 0;
elemento.padding = 0;
imag = document.getElementById("imagen");
imag.src = "cutline.jpg";
imag.width = ancho;
imag.height = alto;

}
</script>
</head>
<body onload='setTimeout("ini()", 3000)'>
<table style="background-color: yellow">

<tr>
<td id=control style="border-style: solid">
Hola
</td>
</tr>

<tr>
<td id= descontrol style="border-style: solid">
<img id=imagen src="">
</td>
</tr>

</table>
</body>
</html>

Le puse un retardo para que se note la diferencia, pero debería quitarse.

Para netscape no funciona clientWidth, pero sí offsetWidth, aunque añado unos puntos a la anchura real.

Bueno, espero que te sirva.

Saludos

Sexma · #11 (**permalink**) 21/06/2003, 12:17

Se me olvido deciros que es la imagen que quiero estirar, que fallo :)

Branevap esa no es la imagen que quiero estirar, porque el tamaño de esas imagenes ya los tengo controlados. La que quiero estirar es la imagen que hay justo debajo de donde pone estadisiticas,

que como veis la tabla es mas grande que la imagen y por tanto no llega y se queda a mitad.

Como veo que parece muy jodido el tema lo que creo que voy a hacer es dividir la imagen en tres partes y poner cada parte en una celda y asi me ahorro todo el engorro este.

En cuanto a la pagina, efectivamente le faltan un par de detalles sobre todo el logo.

Sexma · #12 (**permalink**) 21/06/2003, 12:21

Caricatos para que pones el tamaño de la celda descontrol a 0?, lo otro si lo entiendo pero eso no se para que.

Voy a probarlo

EDITO: Caricatos lo acabo de probar y no funciona , me deforma la tabla y no sale correctamente.

caricatos · #13 (**permalink**) 21/06/2003, 12:37

Hola otra vez:

Sexma: Lo que pongo a 0 son los estilos margin y padding, para asegurarme que va a ubicarse en toda la celda.

Acabo de subir el ejemplo y lo puedes ver aquí: http://www.caricatos.com/pruebas/fuente1.html

Puse 2 tablas para que veas que se adapta a la anchura.

En explorer me fue bien con clientWidth / Height, pero al usar netscape puse offsetWidth / Height, y parece que se adapta bien restándo 6 puntos.

Saludos

caricatos · #14 (**permalink**) 21/06/2003, 12:40

Se me olvidaba:

La imágen se adapta a la celda anterior (control, control2), pero creo que si tienes la tabla hecha con otras estructuras para los bordes, me imagino que tiene que ser más dificil adaptarla.

Saludos

tunait · #15 (**permalink**) 21/06/2003, 13:09

Hola sexma,

mira, aún suponiendo que lograras que esa imagen se estire te quedaría mal (te lo digo por experiencia). Piensa que si estiras esa imagen, no sólo se estirará la línea central, también los palitos verticales de los extremos ... ¡¡¡ y la sombra!!!

Así que en esa zona la sombra se descuadraría con el resto de las imágenes. (te lo digo por experiencia, me encontré con tu mismo problema tiempo atrás).

Mi sugerencia es, lo que has dicho que ibas a hacer. Divide la imagen en 3, inserta cada una en una celda y la central (la de la barra) le puedes pedir un width del 100%. Así por mucho que se estire no te deformará las sombras, puesto que éstas estarán en las celdas de al lado

Bravenap · #16 (**permalink**) 21/06/2003, 14:10

Bueno, al poco de dejar mi mensaje me di cuenta de cuál era la imagen que querías estirar pero como ya no tenía mucho tiempo lo dejé para más tarde. Pero ya veo que habéis estado muy activos desde entonces.

Básicamente, el problema era el mismo que comenté pero adaptado a otra imagen, en este caso, la línea horizontal. Lo que no había caido era en que tanto la horizontal como las dos verticales de los lados eran una sola, menos mal que estaba ahí tunait (

) para dar el aviso. Sin embargo no creo que tengas que dividir la imagen en tres, sino recortarla por los lados para hacer desaparecer los palitos verticales de los extremos ... ¡¡¡ y la sombra!!!

Ya tienes esos palitos en imágenes, son los mismos que has utilizado para el resto de bordes ¿no? Así que con sólo tener la línea horizontal, que incluso se podría hacer con <hr>, y poniendo las tres celdas como haces en las partes superior e inferior de los cuadros quedaría bien. Te vuelvo a comentar la opción de hacerlo con <hr>, puede que así te ahorres una fila con tres celdas en cada tabla (con todas las etiquetas que son necesarias) por solamente una etiqueta <hr>.

Bien, hasta aquí yo creo que vamos dando con la solución.

Ahora voy a por tí caricatos

Tu código es bueno, sí señor. Te felicito pero....¿cómo pondríamos la imagen de fondo y texto encima? Con capas se nos puede ir al garete toda la tabla.

Un saludo a los tres.

caricatos · #17 (**permalink**) 22/06/2003, 05:41

Hola Bravenap:

Gracias por lo del código, pero justamente al principio comenté que no se ajustaban bien...

Tal vez haya soluciones, pero no creo que merezca la pena probarlas...

Se me ocurre lo mismo que la página que se redimensiona, poner una capa con posición absoluta que abarque la celda completa, pero los márgenes y espaciados pueden variar...

El problema final no es si se puede hacer, porque definitivamente se puede hacer solapando capas, pero lo difícil sería que quedara ajustado.

Bueno... si te interesa lo intentamos.

Saludos

Bravenap · #18 (**permalink**) 22/06/2003, 05:45

Casi mejorr para otro momento ¿no?. Creo que ya le hemos dado una(s) solución(es) factible(s) a Sexma y todos tenemos muchas cosas que hacer.

, por ejemplo,

Bueno, un saludo a los tres.

Sexma · #19 (**permalink**) 22/06/2003, 12:57

Pues al final de probar mil cosas me voy a quedar con recortar la imagen, porque

· primero lo de utilizar el HR ya lo probe y no queda el efecto que quiero darle, porque si pones el HR la barra no llega hasta el borde porque llega hasta la imagen que hace de borde que tiene un cacho que es blanco y por tanto queda como si estubiera subrayado.

· El codigo de caricato es muy bueno

y funciona perfectamente en la prueba que he hecho cogiendo simplemente una tabla, pero cuando lo meto en el diseño no se porque se raya la tabla y sale deformada.

Por tanto me quedo con lo d recortar la imagen que no creo que sea mu complicado.

Y Gracias a todos por vuestros consejos.

Woody · #20 (**permalink**) 15/07/2009, 01:02

Yo quería hacer algo parecido y lo conseguí con este hilo del foro:

http://www.forosdelweb.com/f17/image...egador-692381/

por si puede interesar a alguien...

Woody · #21 (**permalink**) 15/07/2009, 01:35

He detectado un problema... me funciona bien en el explorer y mal en el firefox... alguien me podría ayudar? este es el código:

Cita:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>.</title>
<style type="text/css">
* {margin:0; padding:0;}
#background{position:absolute; z-index:1; width:100%; height:100%;}
</style>
</head>
<body>
<table width="1200" height="800" border="0" align="center" cellpadding="0" cellspacing="0">
<tr><td width="50" rowspan="4"><img id="background" src="Images/fondos/fondo_izquierda.jpg"></td>
<td height="150" background="Images/fondos/fondo_up_<?php echo "".$lang."";?>.jpg"></td>
<td width="50" rowspan="4"><img id="background" src="Images/fondos/fondo_derecha.jpg"></td>
</tr>
<tr><td height="100">algo</td></tr>
<tr>
<td>algo
</td>
</tr>
<tr><td height="54" background="Images/fondos/fondo_down.jpg"></td></tr>
</body>
</html>

kseso? · #22 (**permalink**) 15/07/2009, 05:55

Woody, creo que no te diste cuenta que el tema es de hace ¡6 años!
Abre tema nuevo para consultas nuevas, mejor que andar sacando Balrog's de las Minas de Moria

Un saludo