Manuls Manuls - 3 months ago 26
CSS Question

Parallax footer not working in Safari/Firefox

I was following this creating an 'under the rug' parallax footer? to create a parallax footer and when it is in Chrome all goes well, but in Safari and Firefox it doesn't. The thing is, I don't even have vertical scroll in those browsers and I don't know why.

I hope someone can help me. The URL is http://inopia.net/attis/ and the interesting code is this:

#wrapper {

border-bottom: 25px solid white;
margin-bottom:180px;
background: url('img/fondo-test.jpg') no-repeat top left;
position: absolute;
border-right: 20px solid white;
width:100%;
height:100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#footer {
position:fixed;
bottom:0;
width:100%;
height:180px;
margin-top: 10px;
z-index: -2;
background-color:grey;
color: white;
margin-left: -2px;
}


I searched everywhere and I can't find the reason why the footer doesn't appear in those browsers. Any idea about what the problem can be would be appreciated. Thanks!

Answer

Changing the position of the wrapper div from position: absolute; to position: relative; fixes it in Firefox. I don't have Safari to test it in that I'm afraid.

Comments