gatsby-image renders images on top of a fixed navbar

Summary

gatsby-image renders images on top of a fixed navbar when scrolling down the page. When using ordinary html <img>, this issue does not occur.

For troubleshooting, I’ve set the z-index of the navbar to 1000, but this does not solve the issue.

You can check the actual behavior by visiting the live test site. Note that the “Services” section uses gatsby-images and the “About” section uses ordinary html img, so you can see the difference.

For testing and having a look at the actual code, you can clone the repository here.

Environment

System:
    OS: Linux 4.19 Debian GNU/Linux 9 (stretch) 9 (stretch)
    CPU: (4) x64 Intel(R) Core(TM) i5-4690 CPU @ 3.50GHz
    Shell: 4.4.12 - /bin/bash
  Binaries:
    Node: 10.17.0 - /usr/bin/node
    npm: 6.11.3 - /usr/bin/npm
  Languages:
    Python: 2.7.13 - /usr/bin/python
  Browsers:
    Firefox: 71.0
  npmPackages:
    gatsby: ^2.18.12 => 2.18.12
    gatsby-background-image: ^0.9.12 => 0.9.12
    gatsby-image: ^2.2.37 => 2.2.37
    gatsby-plugin-react-helmet: ^3.1.18 => 3.1.18
    gatsby-plugin-sharp: ^2.3.10 => 2.3.10
    gatsby-source-filesystem: ^2.1.43 => 2.1.43
    gatsby-transformer-sharp: ^2.3.9 => 2.3.9
  npmGlobalPackages:
    gatsby-cli: 2.8.16

[nicgutierrez]

If you add z-index: 10 to your BackgroundImage in the header component you fix the issue: https://github.com/cheomanigua/gatsby-issue/blob/master/src/components/header.js#L21

[samzmann]

@cheomanigua Got it, thanks!