Jump to content

Add parallax background only to sections below portfolio

Go to solution Solved by CorinnaR,

Recommended Posts

hi,

is it possible to get the parallax-effect in the background for lower sections on the portfolio page, but not the portfolio section itself? I would like to keep the blue in the portfolio-section, but have all the other sections below that with the background like the about-page (Über Uns).

website: https://scarlet-clementine-rsng.squarespace.com

pw: applaus

 

code I used on the about-page :

<style>
.section-background, .page-section, .section-border {
    background: transparent !important;
}
body  {
    background-image: url(https://static1.squarespace.com/static/6543b43f555c594c9d98c11a/t/654a39a8043430171539d33b/1699363240540/BACKGROUND_WHITE_200.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
}

</style>

Link to comment

@CorinnaR yes try this: 

#collection-6548e6c4d402863b7021bc5c .page-section:not(.first-of-type) .section-background {
    background-image: url(https://static1.squarespace.com/static/6543b43f555c594c9d98c11a/t/654a39a8043430171539d33b/1699363240540/BACKGROUND_WHITE_200.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
}

 

Link to comment
  • Solution

Hi Saranya,

that specific code didn't quite work, but switching the ".first-of-type" for "section:first-child" did the trick.

thank you so much! 😊

 

code used now in header-section go the portfolio page:

<style>
#collection-6548e6c4d402863b7021bc5c .page-section:not(section:first-child) .section-background {
    background-image: url(https://static1.squarespace.com/static/6543b43f555c594c9d98c11a/t/654a39a8043430171539d33b/1699363240540/BACKGROUND_WHITE_200.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
}
  </style>

 

Link to comment

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.