dangalansk

I'm curious how I lock my homepage to the background image and buttons. I've inserted custom CSS and there's still scroll room between my image and the bottom of the page. This code is inserted into the advanced screen of the home page. Thanks! Here's my code: <style> #header, #footer { display: none; } a { filter: brightness(0) invert(1); } a:hover{ filter: brightness(1) invert(0); } .sqs-block-button-element--small{background-color:transparent!important; background-size:contain!important; background-position:center;background-repeat:no-repeat!important;border-width:0!important;} @media only screen and (max-width: 768px){ .fluidImageOverlay, img { display:none !important; } .section-background img { opacity: 0; } .section-background { background-image: url(https://static1.squarespace.com/static/645ad34ac7b0c30c47d1dccb/t/64650dbff2315e7e487074de/1684344255551/cc_bg_mobile.png); background-size: cover; background-position: top; background-repeat: no-repeat !important; } } </style> CC_Homepage.mp4

I inserted a custom CSS template to allow for multiple versions of a background. When in mobile view, it repeats, scrolling down to a smaller version of the image. How do I remove this? My code is inserted only inside the advanced section of the homepage. This is my code: <style> #header, #footer { display: none; } a { filter: brightness(0) invert(1); } a:hover{ filter: brightness(1) invert(0); } .sqs-block-button-element--small{background-color:transparent!important; background-size:contain!important; background-position:center;background-repeat:no-repeat!important;border-width:0!important;} @media only screen and (max-width: 768px){ .fluidImageOverlay, img { display:none !important; } .section-background img { opacity: 0; } .section-background { background-image: url(https://static1.squarespace.com/static/645ad34ac7b0c30c47d1dccb/t/64650dbff2315e7e487074de/1684344255551/cc_bg_mobile.png); background-size: cover; background-position: top; background-repeat: no-repeat !important; } } </style>