como hacer un fondo ajustable?

killerangel · #1 (**permalink**) 08/05/2008, 09:36

hola.

Tengo una imagen de fondo para una tabla pero no se cual es el codigo para q cuando llame a su "class" se tenga el fondo pero adaptado al tamaño de la tabla, la q puede variar segun su contendido...

ayudita porfa!!

nedrek · #2 (**permalink**) 08/05/2008, 10:49

Con (x)html y css es imposible hacer que una imagen se "ajuste" dentro de una tabla u elemento.

Lo máximo que podrás hacer es que re repita o no.

Karma

Un Saludo.

DragonX · #3 (**permalink**) 08/05/2008, 11:41

Cita:

Iniciado por killerangel

hola.

Tengo una imagen de fondo para una tabla pero no se cual es el codigo para q cuando llame a su "class" se tenga el fondo pero adaptado al tamaño de la tabla, la q puede variar segun su contendido...

ayudita porfa!!

.tuclase{
background:#fff url(tu_imagen.gif) repeat-x;
}

Espero te sirva!

killerangel · #4 (**permalink**) 08/05/2008, 16:29

entonces... no se puede hacer un fondo que se ajuste al tamaño de la tabla o div??

pucha q pena!!! :(

Mikmoro · #5 (**permalink**) 08/05/2008, 17:01

¿Que se ajuste en qué sentido? porque las dos respuestas que te han dado son sobre cosas diferentes.

Mikel.

killerangel · #6 (**permalink**) 09/05/2008, 19:55

ajustable en que el fondo de una tabla se adapte al tamaño de la misma, si la tabla se hace grande el fondo de la misma tb y asi...

Se puede

daPhyre · #7 (**permalink**) 12/05/2008, 11:38

Tiempo atrás hice esa misma pregunta, y me ofrecieron esta respuesta:

http://www.forosdelweb.com/f53/fondo...3/#post2351907

Desafortunadamente no lo he probado, por lo que no te puedo asegurar que sirva, pero con un poco de suerte te funcionará. Suerte!

Mikmoro · #8 (**permalink**) 12/05/2008, 11:45

Cita:

Iniciado por killerangel

ajustable en que el fondo de una tabla se adapte al tamaño de la misma, si la tabla se hace grande el fondo de la misma tb y asi...

Se puede

Vas a pensar que soy un poco burro, pero sigo sin entenderte. Quieres que el fondo se adpte al tamaño de la tabla, pero ¿en qué sentido? quiero decir, quieres que se rellene con el color que has elegido, el gráfico o lo que sea, o es una imagen que quieres que cambie de tamaño según cambie la tabla. Es que no es lo mismo.

Imagina que tengo una foto de fondo, y lo que quiero es que se haga más grande o más pequeña según la tabla, con lo cual, se deformaría, o por el contrario, tengo un fondo de rayas y quiero que cuando la tabla crezca se rellene el fondo repitiendo con más rayas.

¿Ves la diferencia de la que hablo? Pues eso es lo que no me queda claro.

Mikel.

rsb17 · #9 (**permalink**) 13/05/2008, 09:56

Busca un pattern que te guste, y que se repita, es la mejor solucion, siempre te quedara relleno y no se tienen por que notar los bordes

uokesita · #10 (**permalink**) 13/05/2008, 15:49

si a lo que te refieres es que la imagen se extienda si agregas contenido por ejemplo de texto. y kieres que se extienda a lo largo(verticalmente).. debes colocarle al div en css la propiedad height:auto; y si es a lo ancho(horizontalmete) width:auto; no se si a esto es a lo que te refieres...

daPhyre · #11 (**permalink**) 14/05/2008, 08:59

Cita:

Iniciado por uokesita

si a lo que te refieres es que la imagen se extienda si agregas contenido por ejemplo de texto. y kieres que se extienda a lo largo(verticalmente).. debes colocarle al div en css la propiedad height:auto; y si es a lo ancho(horizontalmete) width:auto; no se si a esto es a lo que te refieres...

¿Con estas propiedades la imagen se ajusta al tamaño del div? Pensé que solo sevía para ajustar el tamaño del div a su contenido...

furoya · #12 (**permalink**) 19/05/2008, 11:19

Hola todos :

no es que no se pueda ajustar una imagen de fondo; es que no tiene sentido.
Si esa imagen llega a tener un dibujo reconocible, el cambio de tamaño deberá ser proporcional, o el diseño se va a "estirar" (en ancho o en alto). Si pides que el fondo acompañe las medidas de latabla es porque sabes que no tienes control sobre ésta y su tamaño final.

Otro problema es que el ajuste deberá ser vectorial, para evitar el sobrepixelado al agrandar demasiado la imagen.

El único caso en que el estirado funciona bastante bien es en fondos degradados, es decir, cuando la imagen empieza con un color y va haciendo un gradiente hasta terminar en otro. Te dejo un ejemplo para que veas la diferencia. Aunque la imagen es de baja calidad el efecto igual se entiende.

Código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title>ESTIRA FONDO.</title>
<script type="text/javascript">
var imgn = new Array();
imgn[0] = "http://www.forosdelweb.com/images/vbulletin3_logo_fdw.gif";
imgn[1] = "http://img386.imageshack.us/img386/1738/marmoldegrad3jx1.gif";
imgn[2] = "http://static.forosdelweb.com/fdwtheme/images/statusicon/user_offline.gif";

var ancho , alto;

function tamFuente(){
var alfa = Math.floor(Math.random() * 12);
var bravo = (alfa * 4) + 10;
return bravo;
}

function cambiaFondo(T){
document.getElementById("fondo").src = imgn[T];
ancho = document.getElementById("tabla").offsetWidth;
alto = document.getElementById("tabla").offsetHeight;

}

function cambiaTamano(){
for(f=0; f<12; f++){
document.getElementsByTagName("td")[f].style.fontSize = tamFuente() + "px"
}
ancho = document.getElementById("tabla").offsetWidth;
alto = document.getElementById("tabla").offsetHeight;
document.getElementById("fondo").style.height = alto +"px";
document.getElementById("fondo").style.width = ancho +"px";
document.getElementById("contenedor").style.height = alto +"px";
document.getElementById("contenedor").style.width = ancho +"px";

setTimeout("cambiaTamano()" , 2000);
}
onload = cambiaTamano;
</script>
<style type="text/css">
body {color:white; background-color:black}
#contenedor {position:relative; margin:25px}
#tabla {position:absolute; top:0; left:0; border:none; text-align:center; color:red; font-weight:bold}
#fondo {position:absolute; top:0; left:0}
</style>
</head>
<body>
<h2>Estira fondo.</h2>

<select id="selector" onchange="cambiaFondo(this.value)">
<option value=0> Foros del Web </option>
<option value=1> Degradé </option>
<option value=2> Lámpara </option>
</select>
<div id="contenedor">
<img src="http://www.forosdelweb.com/images/vbulletin3_logo_fdw.gif" id="fondo">

<table id="tabla"><tbody><tr>
<td>ALFA</td><td>BRAVO</td><td>CHARLY</td>
</tr><tr>
<td>DELTA</td><td>ECO</td><td>FOXTROT</td>
</tr><tr>
<td>GOLF</td><td>HOTEL</td><td>INDIO</td>
</tr><tr>
<td>JULIETA</td><td>KILO</td><td>LIMA</td>
</tr></tbody></table>
</div>

<h3>Im&aacute;genes.</h3>

<img src="http://www.forosdelweb.com/images/vbulletin3_logo_fdw.gif"> <img src="http://img386.imageshack.us/img386/1738/marmoldegrad3jx1.gif"> <img src="http://static.forosdelweb.com/fdwtheme/images/statusicon/user_offline.gif"> 
</body>
</html>

Mientras lo escribía recordé que esta pregunta ya la había respondido hace mucho tiempo. El enlace es

Fondo de tabla en degradé sin pictures

pero ni lo mires, el código ya no funciona; y en realidad era uno de esos experimentos que solía hacer yo para testear cómo podía reaccionar la comunidad ante semejante engendro.

Y volviendo al principio, no es que no se pueda con CSS; es que usa código propietario -cuándo no- de MS para Internet Explorer 5.5+.

Código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html><head><title>ALPHAIMAGELOADER</title>
<style type="text/css">
body {color:white; background-color:black}
</style>
</head>
<body>
<H2>Fondo autoajustable con AlphaImageLoader. (IE 5.5+)</h2>

<center>
<table border=1 style="font-size:28px; font-weight:bold; color:red; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(          src='http://www.forosdelweb.com/images/vbulletin3_logo_fdw.gif', sizingMethod='scale'); position:relative;"><tbody><tr>
<td>ALFA</td><td>BRAVO</td>
</tr><tr>
<td>CHARLY</td><td>DELTA</td>
</tr><tr>
<td>ECO</td><td>FOXTROT</td>
</tr><tr>
<td>GOLF</td><td>HOTEL</td>
</tr><tr>
<td>INDIO</td><td>JULIETA</td>
</tr><tr>
<td>KILO</td><td>LIMA</td>
</tr></tbody></table>
</center>
</body></html>

Aquí van otros enlaces que quizá te interesen, killerangel. A éstos sí los puedes mirar.

estirar imagen de fondo

backgound image resizable?

Fondo degradado

Tablas tranparentes y Contenido 100% Visible

Creo que había algún otro más hecho con CSS que se ajustaba solamente a lo ancho, para mantener eso de las proporciones. Si lo encuentro, lo posteo.

killerangel · #13 (**permalink**) 22/05/2008, 16:41

Pues no saben cuanto se los agradezco...

Estoy viendo todo lo q dejaron y los enlaces....

vere q pasa y pronto estare posteando!!

GRACIAAAAASSSSSS!!!!!!!!!!