ajustar contenido segun ventana

yuo2 · #1 (**permalink**) 11/06/2011, 11:42

tengo mi

index.html

Código HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<link href="style.css" rel="stylesheet" type="text/css" media="screen" charset="utf-8" />
</head>

<body>
	<div id="main">
		<div id="header">
			cabecera
			<div id="logo"></div>
			<div id="menu"></div>
			
		</div>
		
		<div id="content">
			contenido
		</div>
		
		<div id="footer">
			pie
		</div>
		
	</div>
</body>

</html>

y mi hoja de :
style.css

Código CSS:

Ver originalbody
    {
    font-family:Arial, Helvetica, sans-serif;
    background-color:#95d3e2;
    margin:0px auto;
 
    }
 
#main
   {
    background: url(http://www.picalls.com/data/media/18/Clouds_illustration.jpg) repeat top ;
    position:relative;
    width:100%; 
    height:100%;
    margin: 0 auto; 
    z-index:1;
    
 
    }
 
#header
    {
    background-color: transparent; 
    position:relative;
    height: 208px;
    width: 960px;
    z-index: 2;
    
    }
    
#header #logo
    {
    background-image: url(http://www.beachultimate.org/blog/Wikipedia-logo.gif);
    float:left;
    height:126px;
    width:113px;
    margin-left:220px;
    margin-top:15px;
 
    }
#header #menu
    {
    background-image: url(http://www.maquetacionweb.com/wp-content/uploads/2009/08/menutransparente.JPG);
    position:relative;
    float:left;
    height:224px;
    width:990px;
    margin-left:220px;
    top:15px;
    }
 
#content
    {
   background-color: transparent; 
   position:relative;
   width: 100%;
   height: 500px;
   overflow: hidden;
 
    }
 
#footer
    {
    background-image: url(http://4.bp.blogspot.com/_t2EWvTPf5EI/TH1KMw0VALI/AAAAAAAASok/rPy9-JHodhk/s1600/banner.jpg);
    background-repeat:norepeat;
    background-position:bottom;
    height:352px;
    width:100%;
 
    }

Bueno tengo una imagen de fondo y pie de pagina grandes la cual he usado "%" para ajustarlo a mi diseño. Tamien tengo un div header la cual contiene una imagen como background.

Mi problema esq todo esta fijoo salvo el fondo del main. Lo que quiero es que cuando se achique el tamaño de la ventana del browser (no hablo de resolucion) la imagen del header se valla acomplando sin perder su dimensiones. Osea no lo quiero fijo commo ahora.

Mas o menos quiero que se comporte asi como este blog:
Ejemplo
Ojo: no le hagan caso al ejemplo del blog, sino a la pagina (blog)

yuo2 · #2 (**permalink**) 11/06/2011, 14:30

Alguien se anima ? donde esta mi error

o que me falta.

Cita:

Iniciado por yuo2

Edit: Ya lo resolvi , lo doy por cerrado

jomaruro · #3 (**permalink**) 12/06/2011, 02:56

Hola:

Lo fundamental del foro es compartir, sin embargo tú has preguntado pero no has aportado la solución para ayudar a quien pueda tener el mismo problema que tú. Eso no es compartir.

Saludos.