cinna Posted April 23, 2023 Share Posted April 23, 2023 Hi all! I'd like a codepen css background to span the entire section in Squarespace. Currently it applies only to the code block. I tried adding the section id but it only animates within the code block. I also tried changing the height:100vh, to height:100%. Any ideas what I should change? Original codepen css code. This is the code added from Codepen: (I changed the <div class="area"> to <div class="section-background" > and the .area to section[data-section-id="6254423db3663e23fe701303"] .section-background <div class="section-background" > <ul class="circles"> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div > <style> section[data-section-id="6254423db3663e23fe701303"] .section-background {background: #444444; background: -webkit-linear-gradient(to left, #8f94fb, #4e54c8); width: 100%; height:100vh; } .circles{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; } .circles li{ position: absolute; display: block; list-style: none; width: 20px; height: 20px; background: rgba(255, 255, 255, 0.2); animation: animate 25s linear infinite; bottom: -150px; } .circles li:nth-child(1){ left: 25%; width: 80px; height: 80px; animation-delay: 0s; } .circles li:nth-child(2){ left: 10%; width: 20px; height: 20px; animation-delay: 2s; animation-duration: 12s; } .circles li:nth-child(3){ left: 70%; width: 20px; height: 20px; animation-delay: 4s; } .circles li:nth-child(4){ left: 40%; width: 60px; height: 60px; animation-delay: 0s; animation-duration: 18s; } .circles li:nth-child(5){ left: 65%; width: 20px; height: 20px; animation-delay: 0s; } .circles li:nth-child(6){ left: 75%; width: 110px; height: 110px; animation-delay: 3s; } .circles li:nth-child(7){ left: 35%; width: 150px; height: 150px; animation-delay: 7s; } .circles li:nth-child(8){ left: 50%; width: 25px; height: 25px; animation-delay: 15s; animation-duration: 45s; } .circles li:nth-child(9){ left: 20%; width: 15px; height: 15px; animation-delay: 2s; animation-duration: 35s; } .circles li:nth-child(10){ left: 85%; width: 150px; height: 150px; animation-delay: 0s; animation-duration: 11s; } @keyframes animate { 0%{ transform: translateY(0) rotate(0deg); opacity: 1; border-radius: 0; } 100%{ transform: translateY(-1000px) rotate(720deg); opacity: 0; border-radius: 50%; } } </style> Link to comment
tuanphan Posted April 24, 2023 Share Posted April 24, 2023 Can you share link to page where you added Code Block? We can check easier Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment