Problema ao fixar o rodapé no final da página
Olá a todos,
Sou novato em css3, html5, Jquery, etc... estou enfrentando o seguinte problema:
Na página que estou criando, há o uso do plugin "jparallax" (http://webdev.stephband.info/parallax.html) e ele está sendo usado para fazer uma pequena animação de acordo com o movimento do mouse, até aí tudo bem, já delimitei a utilização de movimento e tudo mais. porém eu gostaria de saber de como usar esse plugin como rodapé da página, pois ele não fica de maneira alguma! gostaria que ele ficasse na posição relativa e acompanhasse a página independente do tamanho da tela, porem não é isso que ocorre. Ele fica como se estivesse "fora" da pagina, porém nao habilita o scroll, por exemplo, ele tem 318px de altura, apenas 150px ficam aparente na pagina e o resto fica "vazado" porém sem scroll. Sendo que o certo seria ele ficar com os 318px sendo exibidos por completo no final da pagina e ao mesmo tempo "atrás" da div de conteúdo.
Não sei se ficou muito confuso, espero que não. rs
Bom, aí vai o código caso alguém queira me dar alguma luz e agradeço desde já.
<div ="footer">
<div id="parallax" class="clear">
<div class="parallax-layer" style="width:1085px; height:307px;">
<img src="imgs/rodape1.png" />
</div>
<div class="parallax-layer" style="width:848px; height:307px;">
<img src="imgs/rodape2.png" />
</div>
</div>
</div>
(esse trecho do código se encontra abaixo de todas as tags que estão dentro do <body>)
#parallax {
position:relative; overflow:hidden; width:100%; height:318px;
background-image:url(../imgs/rodape_fundo.png);
background-repeat:no-repeat;
background-position:bottom;
margin-left:auto;
margin-right:auto;
bottom:0;
}
.parallax-viewport {
position: relative; /* relative, absolute, fixed */
overflow: hidden;
}
.parallax-layer {
bottom:0;
position:relative;
overflow: hidden;
margin-left:auto;
margin-right:auto;
}Discussão (3)
Carregando comentários...