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)