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

Include: Novo, Pazari, Nolan, Utica, Cami, Matsuya, Nevins, Kester, Gates, Zion, Classon, Hawley, Suhama, Elliott, Otto, Tepito, Balboa, Beaumont, Quincy, Talva, Minetta, Falodu, Hester, Crosby, Ventura, Maru, Tresoire, Almar, Alameda, Patil, Stanton, Paloma, Fillmore, Palmera, Souto, Brower, Merida, Grove, Harman, Rivoli, Noll, Bergen, Degraw, Corrigan, Sackett, Lakshi, Pulaski, Suhama, Cailles, Colima, Barbosa, Clune, Irving, Suffolk, Clarkson, Lusaka, Bailard, Malone, Roseti, Euclid, Carmine, Wycoff, Harbor, Ocotillo, Fayette, Roseti, Dario, Soria, Morena, Rey, Lenoix, Bleecker, Vandam, Cruz, Kitui, Waverly, Vance, Orina, Chotto, Auburn, Juniper, Palmer, Atlantic, Iduma, Pine, Eldridge, Pulsaki, Amal, Suhama, Hart, Carroll, Noll, Hidano, Palermo, Cailles, Archer, Kearny, Sellwood, Essex, Mason, Gramercy Studio, Cole, Devoe, Randi, Zorayda, Manor Studios, Grant, Toledo, Hoyd, Troutman, Tantillo, Maqueda, Hemlock, Bogart, Florence

You can set section background image without CSS with SS options.

Share this post:

Leave a Comment