fondo de imagen a tamaño del navegador??

sergiopalao · #1 (**permalink**) 19/03/2008, 15:34

Hola, me podríais ayudar??
quiero hacer que la imagen de fondo de una web se redimensione al tamaño del navegador de quien este visitando la página.

Sabría alguien cómo se hace???...
es mediante un estilo css??

La web la tengo construída entera con css.

Muchas gracias

Raulmmmm · #2 (**permalink**) 19/03/2008, 16:05

Me parece que no se puede poner un fondo que se ajuste, pero sí conseguir ese efecto:

Código HTML:

<style>
*{ margin: 0; padding: 0; }
#fondo{ position: absolute; z-index: 0; width: 100%;}
#encima{ position: absolute; z-index: 10;}
</style>
<div id="fondo"><img src="p.jpg" width="100%" /></div>
<div id="encima">
<div id="contenedor">Hola</div>

Mikmoro · #3 (**permalink**) 19/03/2008, 16:49

Una pequeña variación a lo que te dice raulmmmm, sin usar posición absoluta en el resto de elementos sino relativa y sin z-index:

Cita:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Foto elastica</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>
#caja{
width: 98%;
height: 98%;
position: absolute;
}
#caja img {width: 100%;
height: 100%;
}
.texto {color: #f00;
position: relative;
}
</style>
</head>
<body>
<div id="caja"><img src="fondo.jpg" /></div>
<div class="texto">Dentro se pueden poner cosas sin problema.<br/>
Siempre todo colocado en posición relativa o absoluta.</div>
</body>
</html>

En cualquier caso, no sé qué imagen piensas usar, pero ten en cuenta que siempre se te va a deformar al cambiar el tamaño de la ventana, como en el ejemplo.

http://www.araudi.net/foto_elastica.html

Mikel.