CSS is making Gallery Invisible

Site URL: https://www.thehabituallyelevated.com/creations

Hi There!

Ideally what I'm trying to do is have the below code applied to the entirety of page as a background.
I've attempted the following and ran into these issues —

1. I've added the code to a code block inside of a section that includes text. Doing so, everything disappears.
2. Adding the code block to its own section still makes everything disappear. However, when I move this section to the top of the page, I can see my text in the second section; just not image gallery in the third section. When I the page edit, I'm then able to see the gallery for myself. 
3. I've also went to Design → Custom CSS and tried applying my collection ID and nothing has changed.
   
   
   The code —

   <div class="background">
   <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1231630/moon2.png" alt="">
   <div class="stars"></div>
   <div class="twinkling"></div>
   <div class="clouds"></div>
    <style>
       @keyframes move-background {
     from {
       -webkit-transform: translate3d(0px, 0px, 0px);
     }
     to {
       -webkit-transform: translate3d(1000px, 0px, 0px);
     }
   }
   @-webkit-keyframes move-background {
     from {
       -webkit-transform: translate3d(0px, 0px, 0px);
     }
     to {
       -webkit-transform: translate3d(1000px, 0px, 0px);
     }
   }
   @-moz-keyframes move-background {
     from {
       -webkit-transform: translate3d(0px, 0px, 0px);
     }
     to {
       -webkit-transform: translate3d(1000px, 0px, 0px);
     }
   }
   @-webkit-keyframes move-background {
     from {
       -webkit-transform: translate3d(0px, 0px, 0px);
     }
     to {
       -webkit-transform: translate3d(1000px, 0px, 0px);
     }
   }
      .background {
       position: fixed;
       top: 0;
       left:0;
       bottom: 0;
       right: 0;
   }
   .stars {
     background: black url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/1231630/stars.png) repeat;
     position: absolute;
     top: 0;
     bottom: 0;
     left: 0;
     right: 0;
     display: block;
     z-index: 0;
   }

   .twinkling {
     width: 10000px;
     height: 100%;
     background: transparent url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/1231630/twinkling.png") repeat;
     background-size: 1000px 1000px;
     position: absolute;
     right: 0;
     top: 0;
     bottom: 0;
     z-index: 2;
     -moz-animation: move-background 70s linear infinite;
     -ms-animation: move-background 70s linear infinite;
     -o-animation: move-background 70s linear infinite;
     -webkit-animation: move-background 70s linear infinite;
     animation: move-background 70s linear infinite;
   }

   .clouds {
     width: 10000px;
     height: 100%;
     background: transparent url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/1231630/clouds_repeat.png") repeat;
     background-size: 1000px 1000px;
     position: absolute;
     right: 0;
     top: 0;
     bottom: 0;
     z-index: 3;
     -moz-animation: move-background 150s linear infinite;
     -ms-animation: move-background 150s linear infinite;
     -o-animation: move-background 150s linear infinite;
     -webkit-animation: move-background 150s linear infinite;
     animation: move-background 150s linear infinite;
   }
   img {
     height: 80vh;
     width: 30vh;
     position: sticky;
     z-index: 3;
     right: 20px;
   }

     </style>

   
   Please see attached for what the page should ideally look like minus the code.
   Thank you in advance!

On 7/18/2022 at 5:59 AM, thesd5x said:

Site URL: https://www.thehabituallyelevated.com/creations

Hi There!

Ideally what I'm trying to do is have the below code applied to the entirety of page as a background.
I've attempted the following and ran into these issues —

1. I've added the code to a code block inside of a section that includes text. Doing so, everything disappears.
2. Adding the code block to its own section still makes everything disappear. However, when I move this section to the top of the page, I can see my text in the second section; just not image gallery in the third section. When I the page edit, I'm then able to see the gallery for myself. 
3. I've also went to Design → Custom CSS and tried applying my collection ID and nothing has changed.
   
   
   The code —

   <div class="background">
   <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1231630/moon2.png" alt="">
   <div class="stars"></div>
   <div class="twinkling"></div>
   <div class="clouds"></div>
    <style>
       @keyframes move-background {
     from {
       -webkit-transform: translate3d(0px, 0px, 0px);
     }
     to {
       -webkit-transform: translate3d(1000px, 0px, 0px);
     }
   }
   @-webkit-keyframes move-background {
     from {
       -webkit-transform: translate3d(0px, 0px, 0px);
     }
     to {
       -webkit-transform: translate3d(1000px, 0px, 0px);
     }
   }
   @-moz-keyframes move-background {
     from {
       -webkit-transform: translate3d(0px, 0px, 0px);
     }
     to {
       -webkit-transform: translate3d(1000px, 0px, 0px);
     }
   }
   @-webkit-keyframes move-background {
     from {
       -webkit-transform: translate3d(0px, 0px, 0px);
     }
     to {
       -webkit-transform: translate3d(1000px, 0px, 0px);
     }
   }
      .background {
       position: fixed;
       top: 0;
       left:0;
       bottom: 0;
       right: 0;
   }
   .stars {
     background: black url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/1231630/stars.png) repeat;
     position: absolute;
     top: 0;
     bottom: 0;
     left: 0;
     right: 0;
     display: block;
     z-index: 0;
   }

   .twinkling {
     width: 10000px;
     height: 100%;
     background: transparent url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/1231630/twinkling.png") repeat;
     background-size: 1000px 1000px;
     position: absolute;
     right: 0;
     top: 0;
     bottom: 0;
     z-index: 2;
     -moz-animation: move-background 70s linear infinite;
     -ms-animation: move-background 70s linear infinite;
     -o-animation: move-background 70s linear infinite;
     -webkit-animation: move-background 70s linear infinite;
     animation: move-background 70s linear infinite;
   }

   .clouds {
     width: 10000px;
     height: 100%;
     background: transparent url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/1231630/clouds_repeat.png") repeat;
     background-size: 1000px 1000px;
     position: absolute;
     right: 0;
     top: 0;
     bottom: 0;
     z-index: 3;
     -moz-animation: move-background 150s linear infinite;
     -ms-animation: move-background 150s linear infinite;
     -o-animation: move-background 150s linear infinite;
     -webkit-animation: move-background 150s linear infinite;
     animation: move-background 150s linear infinite;
   }
   img {
     height: 80vh;
     width: 30vh;
     position: sticky;
     z-index: 3;
     right: 20px;
   }

     </style>

   
   Please see attached for what the page should ideally look like minus the code.
   Thank you in advance!

I check that is is fine. Have you figured it out? Do you still need help?

2 hours ago, bangank36 said:

I check that is is fine. Have you figured it out? Do you still need help?

Yes, I do. The background isn't supposed to look like this.
The custom code provided in the first post is what is needing to be applied.
There is supposed to be a stagnant moon with animated clouds and stars.