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>