Jump to content

Clarkson Template: Fix Background Image

Go to solution Solved by AnaimationDesign,

Recommended Posts

  • Solution

Hello tuanphan, this is the solution you gave me and I would like to share it with the communitiy. It works like a charm!

 

body.homepage .section-background-content {visibility: hidden;}
body.homepage .section-background, body.homepage .section-border {
    background-color: transparent;
}
body.homepage {
    background-image: url(https://images.squarespace-cdn.com/content/v1/643730a61107da2b66f542b0/7ffd4d67-ae6a-4042-99d8-a5346fa7fe1f/a-thousand-pines-background.jpg?format=original);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
}
Link to comment

Hello again, if I would like to add the same code to other pages in the same website, how would I replace the page id (instead of "homepage")?

This is what I am using for my "TEAM" page:

body.team .section-background-content {visibility: hidden;}
body.team .section-background, body.team .section-border {
    background-color: transparent;
}
body.team {
    background-image: url(https://images.squarespace-cdn.com/content/643730a61107da2b66f542b0/10794d7f-7b51-44df-a11a-3fdbef7e050a/a-thousand-pines-background-02.jpg?format=original);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
}

 

Link to comment

This is what I am using and appears to be working. I used the Collection ID for the page:

#collection-6438c2207b6835253f63320a .section-background-content {visibility: hidden;}
#collection-6438c2207b6835253f63320a .section-background, #collection-6438c2207b6835253f63320a .section-border {
    background-color: transparent;
}
#collection-6438c2207b6835253f63320a {
    background-image: url(https://images.squarespace-cdn.com/content/643730a61107da2b66f542b0/10794d7f-7b51-44df-a11a-3fdbef7e050a/a-thousand-pines-background-02.jpg?format=original);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
}

 

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.