Adding a Background Image on a Single Page in 7.0??

Site URL: https://www.honeyphillips.com/olivia-and-the-orc-v2

Hello, 

I am having issues adding custom CSS for a background image on a single page using the code injector.   It shows mostly okay in the editor, with the exception of a weird gap, but does not show on the front end.  I am fairly new to CSS and I am not sure where I went wrong with the code.   Can anyone advise? 

Image 1 (Editor)

Image 2 (Front-End)

Code Used:

<style>
.Header, .Footer, .Mobile-bar {
display:none !important;
}
  body:before{
  background-image: url(https://static1.squarespace.com/static/5ccbb149a568273fb0aad690/t/628e8efa8826f40d5709c685/1653509883202/Screen+Shot+2022-05-25+at+4.13.57+PM.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  content: '';
  height: 100%;
  opacity: .2;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  z-index: -10;
}
  .Index-page,
.Header--bottom {
  background-color: transparent;
}

#about h1,
#about p {
  color: white;
</style>

Where are you entering the CSS? I'm not seeing hide nor hare of it on the page.

Design > Custom CSS? Or, Page Settings > Advanced > Page Header Code Injection for the page? Or a code block?

Sorry.  I missed adding that part. 

I am adding the CSS in Page Settings > Advanced > Page Header Code Injection for the page.

It's odd because I see the first rule-set but no sign of the second. You've double checked it is there? I assume so since it appears to be working while editing.