He realizado una web en la que tengo una imagen fija que se muestra siempre pegada en la parte inferior del navegador.
El caso es que ahora me han pedido que añada una imagen institucional, la cual lleva una cabecera y un pie (quedando la web anterior entre medias de ambos). Entonces al introducir el pie, como la imagen está fija, al bajar al final de la página, se sale de lo que era el contenido anterior, e invade el pie actual.
Quisiera saber si es posible hacer que la imagen se muestre siempre pegada a la parte inferior del navegador, excepto cuando se llegue hasta el momento en que aparece el pie, que la imagen debería quedar al borde del contenido anterior, sin sobrepasarlo. Espero haberme explicado bien. Y si eso fuese posible, cómo debería hacerlo.
Os pongo aquí parte del código de la web.
<body>
<div id="cabecera"> <!-- Esta es la nueva cabecera de la imagen institucional -->
...
</div>
<div id="contenido"> <!-- Este es el contenido anterior de la web -->
...
<div id="robot"></div> <!-- Aquí está la imagen fija -->
</div> <!-- Cierro el div contenido -->
<div id="pie"> <!-- Este es el nuevo pie de la imagen institucional -->
...
</div>
Y el código CSS correspondiente a la imagen fija sería este:
#robot {
position: fixed;
background-image: url('../imagenes/robot.png');
background-repeat: no-repeat;
width: 227px;
height: 284px;
background-position: right bottom;
bottom: 0px;
margin-left: 587px;
}
Gracias.
