Jump to content

CSS is making Gallery Invisible

Recommended Posts

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!

screencapture-thehabituallyelevated-creations-2022-07-17-17_55_56.png

Link to comment
  • Replies 2
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

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!

screencapture-thehabituallyelevated-creations-2022-07-17-17_55_56.png

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

image.thumb.png.aa4ba879e42c24c5916eae307eb83ee3.png

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
2 hours ago, bangank36 said:

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

image.thumb.png.aa4ba879e42c24c5916eae307eb83ee3.png

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.

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.