Ver Mensaje Individual
  #4 (permalink)  
Antiguo 03/05/2010, 12:47
Jose_CSS
 
Fecha de Ingreso: mayo-2010
Mensajes: 6
Antigüedad: 13 años, 11 meses
Puntos: 0
Respuesta: fondo de esta web

Muchas gracias tanto a eMaa como a alexk por responder.

No sabía que se llamase fondo líquido, aunque sí que había escuchado sobre los layers líquidos, así que gracias por la aclaración.

alexk, he seguido las instrucciones y mi duda inicial ha quedado 100% resuelta. Ahora tengo otra. Una vez que he puesto todo el css tal y como se indicaba en el tema de "fondo líquido" que me indicastes, el tema del fondo funciona tal y como quería. La única pega es que la estructura junto con el contenido no se ve, es decir, se ve el header (que tiene fondo negro) pero no se ve el logo ni el menu (son imágenes) que contiene el mismo header. Lo que sí se ve es el texto html que se genera, pero las imagenes no. No se que es lo que falla aquí.

Aquí va el css:
* { margin-top: 0pt;
margin-right: 0pt;
margin-bottom: 0pt;
margin-left: 0pt;
padding-top: 0pt;
padding-right: 0pt;
padding-bottom: 0pt;
padding-left: 0pt;
position: relative;}

html, body{width:100%
height:100%;
overflow:hidden;}

.img_bg{width:100%;
height:100%;
position:absolute;
z-index:1;}

.all{width: 100%;
height: 100%;
overflow-x: auto;
overflow-y: auto;
left: 0pt;
top: 0pt;
z-index: 2;}

.cont{width:80%;
margin:0 auto;}

#header {position:fixed;
background-color: #000;
background-attachment: fixed;
height: 40px;
width: 100%;
z-index: 2;
top: 0px;
left: 0px;}

#logo {background-image: url(Logo.jpg);
float: left;
height: 34px;
width: 207px;
margin-top: 3px;
margin-bottom: 3px;
margin-left: 20px;
z-index: 2;}

#menu {background-image: url(menu.jpg);
float: right;
height: 32px;
width: 358px;
margin-top: 4px;
margin-right: 20px;
margin-bottom: 4px;}

#contenedor {position:absolute;
left: 0;
right: 0;
background-image: url(fondo_menor.jpg);
background-repeat: no-repeat;
height: 100%;
width: 100%;
background-position: 100% 100%;}

#space {height: 100px;
width: 800px;
margin-right: auto;
margin-left: auto;}

#content {height: 500px;
width: 800px;
margin-right: auto;
margin-left: auto;}

Ahí va el body:
<body>
<img src="A ver si puede ser esta/fondo_menor.jpg" class="img_bg" alt="Fondito" />
<div class="all">
<div class="cont">
<div id="header">
<div id="logo"></div>
<div id="menu"></div>
</div>
<div id="space"></div>
<div id="content"><img src="content.jpg" width="800" height="459" /></div>
</div>
tu contenido (esto es lo único que se puede ver junto con el color negro del header)</div>
</div>
</body>