JSFiddle - React, Tailwind, and code Playground

HTML

<body>
<div class="fixed1">
fixed background image is not "fixed" in Firefox because a transform has been added to this element.
</div>
<div class="more-content">
<p>Content div to push the page down</p>
</div>
<div class="fixed2">
fixed background image in this element remains "fixed", because no transform property exists on this element.
</div>
<div class="more-content">
<p>Content div to push the page down</p>
</div>
</body>

CSS

.fixed1, .fixed2 {
  color: #fff;  
  height: 173px;
  background-image: url(http://jeansmithartist.com/wp-content/uploads/2012/02/singers.jpg);
  background-attachment: fixed;
}
.fixed1 {
  transform: translateZ(0);
}
.more-content {
  height: 300px;
  background: #aaa
}