Foros del Web » Creando para Internet » CSS »

fondo de imagen a tamaño del navegador??

Estas en el tema de fondo de imagen a tamaño del navegador?? en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 19/03/2008, 16:34
 
Fecha de Ingreso: marzo-2007
Mensajes: 9
Antigüedad: 10 años, 8 meses
Puntos: 0
fondo de imagen a tamaño del navegador??

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
  #2 (permalink)  
Antiguo 19/03/2008, 17:05
Avatar de Raulmmmm  
Fecha de Ingreso: marzo-2007
Ubicación: En otro lugar que tú
Mensajes: 1.549
Antigüedad: 10 años, 8 meses
Puntos: 36
Re: fondo de imagen a tamaño del navegador??

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> 
  #3 (permalink)  
Antiguo 19/03/2008, 17:49
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: fondo de imagen a tamaño del navegador??

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