Jump to content

Sticky Section Background - Portfolio

Recommended Posts

I'm trying to achieve a sticky scroll background image on portfolio pages (https://mg-creative.squarespace.com/projects/kaylee-cook-design and https://mg-creative.squarespace.com/projects/hayley-alexandra-events). I also have a full site border, and on the pages where something is sticky, the image is showing up on the top, bottom and left sides where the border should be. 

I have a bit of code on this site, so trying to figure out what needs to be adjusted! 

Thanks!

 

Below are the codes I'm using for both site border and sticky sections.

 

//Add Site Border
body:not(.sqs-edit-mode-active) {
  &, #header {
    border: clamp(12px,4vw,15px) solid #534A3A;
    transparency: none;
    z-index: 999!important;
  }
  #header { border-bottom: none; }
}


//Portfolio Sticky Sections
section[data-section-id="65a1e182f4576c65330892fd"], section[data-section-id="65b3ed1b350827759e9d9577"]
.section-background img {
  position: fixed !important;
  top: 0 !important;
}

section[data-section-id="65a1e182f4576c65330892fd"], section[data-section-id="65b3ed1b350827759e9d9577"]
.section-border {
  overflow: hidden !important;
  z-index: -999;
}

footer.sections, footer.sections section {
    z-index: 999 !important;
}

 

Link to comment
  • Replies 0
  • Views 1.1k
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

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.