Buy me a coffee

Squarespace: Different Background Image for Each Page

In this post, I will share some custom code to change background image for each page in Squarespace 7.0 & 7.1

Notes

  • Add code to Page Settings > Advanced > Header
  • Add !important to after if the code doesn’t work. Eg: background-image: url(image url) !important;
  • These codes only change Main Content background image, not Header, Footer
  • Send me a message if you have any questions/the code doesn’t work.

Adirondack

<style>
#content .content-inner-wrapper {
    background-image: url(https://beaverhero.com/wp-content/uploads/2019/06/trees-3464777_640-min.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}
</style>

Avenue

<style>
body#collection-56d4a580e707eb7a02e4308b {
    background-image: url(https://beaverhero.com/wp-content/uploads/2019/06/trees-3464777_640-min.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}
</style>

Aviator

<style>
body#collection-56cb76ed8a65e24ba86eba1d {
    background-image: url(https://beaverhero.com/wp-content/uploads/2019/06/trees-3464777_640-min.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}
</style>

Bedford Template Family

Include: Anya, Bedford, Bryant, Hayden, Bedford

<style>
#siteWrapper {
    background-color: #fff;
    background-image: url(https://beaverhero.com/wp-content/uploads/2019/06/trees-3464777_640-min.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}
</style>

Brine Template Family

Include: Aria, Basil, Blend, Brine, Burke, Cacao, Clay, Custom Template, Ethan, Fairfield, Feed, Foster, Greenwich, Hatch, Heights, Hunter, Hyde, Impact, Jaunt, Juke, Keene, Kin, Lincoln, Maple, Margot, Marta, Mentor, Mercer, Miller, Mojave, Moksha, Motto, Nueva, Pedro, Polaris, Pursuit, Rally, Rover, Royce, Sofia, Sonny, Sonora, Stella, Thorne, Vow, Wav, West, Brine.

<style>
main.Main {
    background-image: url(https://beaverhero.com/wp-content/uploads/2019/06/trees-3464777_640-min.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}
</style>

Farro

Include: Farro, Haute

<style>
main#main {
    background-image: url(https://beaverhero.com/wp-content/uploads/2019/06/trees-3464777_640-min.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}
</style>

Five

<style>
div#canvas-wrapper {
    background-image: url(https://beaverhero.com/wp-content/uploads/2019/06/trees-3464777_640-min.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}
</style>

Flatiron

<style>
div#navigator {
    background-image: url(https://beaverhero.com/wp-content/uploads/2019/06/trees-3464777_640-min.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}
</style>

Forte

<style>
div#canvasWrapper {
    background-image: url(https://beaverhero.com/wp-content/uploads/2019/06/trees-3464777_640-min.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}
</style>

Galapagos

<style>
body {
    background-image: url(https://beaverhero.com/wp-content/uploads/2019/06/trees-3464777_640-min.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}
</style>

Ishimoto

<style>
body {
    background-image: url(https://beaverhero.com/wp-content/uploads/2019/06/trees-3464777_640-min.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}
</style>

Momentum

<style>
body {
    background-image: url(https://beaverhero.com/wp-content/uploads/2019/06/trees-3464777_640-min.jpg) !important;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}
</style>

Montauk Template Family

Include: Julia, Kent, Montauk, OM

<style>
body {
    background-image: url(https://beaverhero.com/wp-content/uploads/2019/06/trees-3464777_640-min.jpg) !important;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}
</style>

Native

<style>
body {
    background-image: url(https://beaverhero.com/wp-content/uploads/2019/06/trees-3464777_640-min.jpg) !important;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}
</style>

Pacific Template Family

Include:  Bryler, Charlotte, Fulton, Horizon, Naomi, Pacific

<style>
#siteWrapper {
    background-image: url(https://beaverhero.com/wp-content/uploads/2019/06/trees-3464777_640-min.jpg) !important;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}
</style>

Skye Template Family

Include: Foundry, Indigo, Ready, Skye, Tudor

<style>
body {
    background-image: url(https://beaverhero.com/wp-content/uploads/2019/06/trees-3464777_640-min.jpg) !important;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}
</style>

Supply

can’t set fullwidth & height background image

Tremont Template Family

Include: Camino, Carson, Henson, Tremont

<style>
.main-content {
    background-image: url(https://beaverhero.com/wp-content/uploads/2019/06/trees-3464777_640-min.jpg) !important;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}
</style>

Wells

<style>
body {
    background-image: url(https://beaverhero.com/wp-content/uploads/2019/06/trees-3464777_640-min.jpg) !important;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}
</style>

Wexley

<style>
body {
    background-image: url(https://beaverhero.com/wp-content/uploads/2019/06/trees-3464777_640-min.jpg) !important;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}
</style>

York Template Family

Include: Artesia, Flores, Harris, Jasper, Jones, Lange, Shibori, Taylor, York

<style>
.overflow-wrapper {
    background-image: url(https://beaverhero.com/wp-content/uploads/2019/06/trees-3464777_640-min.jpg) !important;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}
</style>

Squarespace 7.1

<style>
#page {
    background-image: url(https://beaverhero.com/wp-content/uploads/2019/06/trees-3464777_640-min.jpg) !important;
    background-repeat: no-repeat;
    background: transparent;
}
.page-section {
    background: transparent !important;
}
</style>

12 thoughts on “Squarespace: Different Background Image for Each Page”

  1. Thank you so much! If I am only looking to add this to the third footer rather than all of them, would I just target the section ID?

    Reply
  2. Hi Tuan,

    Is there a way to add the same section to the top of each product page in SS 7.1?

    Thank you 🙂

    Reply

Leave a Comment

Ask me a question, free

If your site is private or in trial, just setup password and share url. See how to: https://beaverhero.com/squarespace-how-to/
Please check your email carefully. Recently I got a lot of questions with wrong emails.

If you haven't heard from me within 24 hours please check your junk/spam folder