Jump to content

Mobile-view with custom CSS BG, repeats with a smaller version of the image at the bottom (HELP!)

Recommended Posts

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>

 

 

Screenshot 2024-06-29 at 12.56.06 PM.png

Screenshot 2024-06-29 at 12.56.13 PM.png

Link to comment
  • Replies 1
  • Views 229
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

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.