CSS Parallax

gistfile1.txt

https://keithclark.co.uk/articles/pure-css-parallax-websites/demo1/

Basically, the idea is:

Top-level page container element (contains navbar body footer, the level which the main scrollbar will be) requires:

#___gatsby {
  perspective: 1px;
  overflow: auto;
  height: 100%;
}

perspective: 1px is required - without it, the background image is just scaled 2x
overflow: auto is required - without it, the background image is located at the correct Y-offset but does not scroll at a different rate.
height: 100% is required - without it, the image has an incorrect Y-offset and does not scroll at a different rate

From there, you should basically have a Container with an absolutely positioned background div and content div:

.Container {
  position: relative;
  overflow: hidden;
}

.ImgContainer {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  transform: translate(-1px) scale(2); // you may need to adjust scale to fit, for some reason 2.01 works best for my images
}

.Content {
  position: relative;
  z-index: 2;
}

I keep having to relearn parallax and the quirks of perspective, so writing it down in the hopes of remembering.