CSS Parallax Backgrpund Header in Firefox

Question

I've wrote a little experiment for a parallax background header using only CSS: http://codepen.io/Kageetai/pen/yIdAq?editors=110

It's works very well in Chrome but in Firefox the header has a strange behaviour, even though Codepen uses -prefix-free. The background images shoves itself on top of the content below and the jumbs after scrolling down a bit.

It uses the technique found here, which I think is very elegant. So I copied most of it and wanted to apply it for a header.

I suppose it has something to do with that part, which mainly makes the parallax happening:

.parallax {
  position: relative;
  //padding: 25vh 10%;
  padding: 0.1px; // strange behaviour with padding 0
  min-height: 100vh;
  width: 100vw;
  box-sizing: border-box;
  transform-style: inherit;
  background: 50% 50% / cover; 

   &:before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left:0;
    right:0;
    background: 50% 50% / cover; 
  }
}

header {
  text-align: center;
  color: whitesmoke;

  &:before {
    background-image: url(http://www.theloftberlin.com/wp-content/uploads/2013/09/2013-berlin.jpg) !important;
  transform: translateZ(-1px) scale(2);
  z-index:-1;
  }
}

And furthermore the fixed navigation isn't fixed at all on Chrome and Firefox.

Anyone any ideas? Thanks!

Answer 1

Add position:relative to your #wrapper that will fix overlapping of image on the text.