Foros del Web » Creando para Internet » CSS »

como hacer un fondo ajustable?

Estas en el tema de como hacer un fondo ajustable? en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 08/05/2008, 10:36
Avatar de killerangel  
Fecha de Ingreso: septiembre-2007
Ubicación: Un punto en el espacio
Mensajes: 592
Antigüedad: 10 años, 2 meses
Puntos: 10
Pregunta como hacer un fondo ajustable?

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!!

Última edición por killerangel; 08/05/2008 a las 11:51
  #2 (permalink)  
Antiguo 08/05/2008, 11:49
 
Fecha de Ingreso: abril-2008
Ubicación: -
Mensajes: 156
Antigüedad: 9 años, 7 meses
Puntos: 5
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.
  #3 (permalink)  
Antiguo 08/05/2008, 12:41
Avatar de DragonX
Colaborador
 
Fecha de Ingreso: mayo-2002
Ubicación: Funkyland
Mensajes: 8.339
Antigüedad: 15 años, 6 meses
Puntos: 153
Re: como hacer un fondo ajustable?

Cita:
Iniciado por killerangel Ver Mensaje
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!
  #4 (permalink)  
Antiguo 08/05/2008, 17:29
Avatar de killerangel  
Fecha de Ingreso: septiembre-2007
Ubicación: Un punto en el espacio
Mensajes: 592
Antigüedad: 10 años, 2 meses
Puntos: 10
Re: como hacer un fondo ajustable?

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

pucha q pena!!! :(
  #5 (permalink)  
Antiguo 08/05/2008, 18:01
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: como hacer un fondo ajustable?

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

Mikel.
  #6 (permalink)  
Antiguo 09/05/2008, 20:55
Avatar de killerangel  
Fecha de Ingreso: septiembre-2007
Ubicación: Un punto en el espacio
Mensajes: 592
Antigüedad: 10 años, 2 meses
Puntos: 10
Re: como hacer un fondo ajustable?

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
  #7 (permalink)  
Antiguo 12/05/2008, 12:38
Avatar de daPhyre
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: [email protected] (Redirects to 127.0.0.1)
Mensajes: 2.404
Antigüedad: 9 años, 9 meses
Puntos: 142
Re: como hacer un fondo ajustable?

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!
__________________
<signs>daPhyre</signs>
Jugaa.me


Adios al dolor de cabeza de IE...
  #8 (permalink)  
Antiguo 12/05/2008, 12:45
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: como hacer un fondo ajustable?

Cita:
Iniciado por killerangel Ver Mensaje
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.
  #9 (permalink)  
Antiguo 13/05/2008, 10:56
 
Fecha de Ingreso: mayo-2008
Mensajes: 105
Antigüedad: 9 años, 7 meses
Puntos: 0
Re: como hacer un fondo ajustable?

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
  #10 (permalink)  
Antiguo 13/05/2008, 16:49
Avatar de uokesita  
Fecha de Ingreso: enero-2008
Ubicación: Maracaibo
Mensajes: 214
Antigüedad: 9 años, 11 meses
Puntos: 17
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...
  #11 (permalink)  
Antiguo 14/05/2008, 09:59
Avatar de daPhyre
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: [email protected] (Redirects to 127.0.0.1)
Mensajes: 2.404
Antigüedad: 9 años, 9 meses
Puntos: 142
Re: como hacer un fondo ajustable?

Cita:
Iniciado por uokesita Ver Mensaje
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...
__________________
<signs>daPhyre</signs>
Jugaa.me


Adios al dolor de cabeza de IE...
  #12 (permalink)  
Antiguo 19/05/2008, 12:19
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 15 años, 1 mes
Puntos: 317
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:
<!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.

  #13 (permalink)  
Antiguo 22/05/2008, 17:41
Avatar de killerangel  
Fecha de Ingreso: septiembre-2007
Ubicación: Un punto en el espacio
Mensajes: 592
Antigüedad: 10 años, 2 meses
Puntos: 10
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!!!!!!!!!!
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 04:29.