Ver Mensaje Individual
  #12 (permalink)  
Antiguo 19/05/2008, 11:19
furoya
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 22 años
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.