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!!
08-may-2008, 09:36
|
#1 (permalink) |
 
Fecha de Ingreso: septiembre-2007
Ubicación: Un punto en el espacio
Mensajes: 338
 |
como hacer un fondo ajustable?
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!! Última edición por killerangel; 08-may-2008 a las 10:51. |
|
|
|
08-may-2008, 10:49
|
#2 (permalink) |
Fecha de Ingreso: abril-2008
Ubicación: Valencia, España
Mensajes: 151
|
Re: como hacer un fondo ajustable?
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. |
|
|
|
|
08-may-2008, 11:41
|
#3 (permalink) |
Fecha de Ingreso: noviembre-2002
Ubicación: Funkyland
Mensajes: 6.976
|
Re: como hacer un fondo ajustable?
Cita:
.tuclase{
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!! background:#fff url(tu_imagen.gif) repeat-x; } Espero te sirva!  |
|
|
|
|
12-may-2008, 11:38
|
#7 (permalink) |
Fecha de Ingreso: marzo-2008
Ubicación: Idle. Return on 18/08
Mensajes: 765
|
Re: como hacer un fondo ajustable?
Tiempo atrás hice esa misma pregunta, y me ofrecieron esta respuesta:
fondo degradado Desafortunadamente no lo he probado, por lo que no te puedo asegurar que sirva, pero con un poco de suerte te funcionará. Suerte! |
|
|
|
|
12-may-2008, 11:45
|
#8 (permalink) |
|
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: A tu espalda
Mensajes: 3.463
|
Re: como hacer un fondo ajustable?
Cita:
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.
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 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. |
|
|
|
|
13-may-2008, 15:49
|
#10 (permalink) |
 Fecha de Ingreso: enero-2008
Ubicación: Maracaibo
Mensajes: 82
|
Re: como hacer un fondo ajustable?
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...
|
|
|
|
|
14-may-2008, 08:59
|
#11 (permalink) |
|
Fecha de Ingreso: marzo-2008
Ubicación: Idle. Return on 18/08
Mensajes: 765
|
Re: como hacer un fondo ajustable?
Cita:
¿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...
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...
|
|
|
|
|
19-may-2008, 11:19
|
#12 (permalink) |
|
Fecha de Ingreso: noviembre-2002
Mensajes: 981
|
Respuesta: como hacer un fondo ajustable?
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:
Mientras lo escribía recordé que esta pregunta ya la había respondido hace mucho tiempo. El enlace es<!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á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>
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:
Aquí van otros enlaces que quizá te interesen, killerangel. A éstos sí los puedes mirar.<!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>
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.  |
|
|
|
|
22-may-2008, 16:41
|
#13 (permalink) |
|
Fecha de Ingreso: septiembre-2007
Ubicación: Un punto en el espacio
Mensajes: 338
|
Respuesta: como hacer un fondo ajustable?
Pues no saben cuanto se los agradezco...
Estoy viendo todo lo q dejaron y los enlaces.... vere q pasa y pronto estare posteando!! GRACIAAAAASSSSSS!!!!!!!!!! |
|
|
|
Mode Lineal
La Zona horaria es GMT -6. Ahora son las 03:11.
