Add .js asset as a full sized background to store

Technical Q&A
1

Hi,

I am trying to apply a .js file as a full-screen background on the homepage of my store, behind my header and footer.

I have created a new section and added this code:

I have then added this styling to the scss file:

.game-container canvas{
  
  position: absolute !important;
  z-index: -2;
/*   vertical-align: top;
  width: 100vw;
  height: 100vh;
  display: inline;
  //position: static;
  top: 0;
  left: 0;
  padding: 0;
  z-index: -9999; */
}

.game-container {
  position: relative;
  width: 100%;
  height: 100%;
  //background-color: #bbbbbb;
  background-image: url("");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
  z-index: -2;

}

Unfortunately, the header and footer are still appearing to ‘push’ on the section I am trying to use as the background. Essentially making the ‘background’ appear in the middle of my header and footer, rather than behind.

The preview link is here: https://l8qphu8kgo6j8pr0-59090927789.shopifypreview.com

and the password is ‘testing’

Any help would be massively appreciated.