Foros del Web - como hacer un fondo ajustable?

Foros del Web

Foros del Web (http://www.forosdelweb.com/)

- CSS (http://www.forosdelweb.com/f53/)

- - como hacer un fondo ajustable? (http://www.forosdelweb.com/f53/como-hacer-fondo-ajustable-584270/)

killerangel

08/05/2008 09:36

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

nedrek

08/05/2008 10:49

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 :si:
Un Saludo.

DragonX

08/05/2008 11:41

Re: como hacer un fondo ajustable?

Cita:

Iniciado por killerangel (Mensaje 2395544)

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

killerangel

08/05/2008 16:29

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

Mikmoro

08/05/2008 17:01

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.

killerangel

09/05/2008 19:55

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

daPhyre

12/05/2008 11:38

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!

Mikmoro

12/05/2008 11:45

Re: como hacer un fondo ajustable?

Cita:

Iniciado por killerangel (Mensaje 2398053)

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

13/05/2008 09:56

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

uokesita

13/05/2008 15:49

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

daPhyre

14/05/2008 08:59

Re: como hacer un fondo ajustable?

Cita:

Iniciado por uokesita (Mensaje 2403188)

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

19/05/2008 11:19

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.

http://img386.imageshack.us/img386/1...degrad3jx1.gif

killerangel

22/05/2008 16:41

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

La zona horaria es GMT -6. Ahora son las 08:09.

Desarrollado por vBulletin® Versión 3.8.7
Derechos de Autor ©2000 - 2026, Jelsoft Enterprises Ltd.