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>

Share this post:

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

Laura

Jun 28, 2020 at 3:30 am

Do you have codes to change the background footer images on each different page?
- Tuan Phan
  
  Jun 28, 2020 at 5:34 am
  
  Hi. Each template needs different code. Which template do you use?
  If you use Squarespace 7.1, use this code
  Also, if you have any problems, you can post on above forum or send to my email: https://beaverhero.com/covid19/
Laura

Jun 29, 2020 at 2:21 am

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?
- Tuan Phan
  
  Jun 29, 2020 at 4:10 am
  
  Hi. Which template do you use? Can you share link to your site?
  You can send to my email: https://beaverhero.com/covid19/
  or post on forum: https://sqshero.com/
  Comment notifications doesn’t work very well.
Laura

Jun 29, 2020 at 4:41 am

Thank you! Just sent you an email.
Shannon

Jul 29, 2020 at 10:56 pm

Hi Tuan! Is there a way to background header to be an image on Pacific 7.0 template?
- Tuan Phan
  
  Aug 4, 2020 at 7:31 am
  
  Use this code. https://beaverhero.com/pacific-template-squarespace/#Header_Background_Image
Hannah

Sep 5, 2020 at 2:08 am

Is there a way to add an image background to a collection page, like a Blog, in 7.1?
- Tuan Phan
  
  Sep 5, 2020 at 8:37 am
  
  Updated the code for SS 7.1.
Tyler Ericson

Sep 12, 2020 at 3:43 am

HI There,

How do I put my own background image into the code?
Krista Jewett

Sep 24, 2020 at 4:00 am

Hi Tuan,

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

Thank you 🙂
- Tuan Phan
  
  Oct 6, 2020 at 9:08 am
  
  Hi,
  I’m overloading.
  If you have any questions, please post on SS forum or send to my email: https://beaverhero.com/covid19
  I will check carefully at the end of day

BEAVER HERO

Free answer within 24 hours. Send your questions now ->

Squarespace: Different Background Image for Each Page

Adirondack

Avenue

Aviator

Bedford Template Family

Brine Template Family

Farro

Five

Flatiron

Forte

Galapagos

Ishimoto

Momentum

Montauk Template Family

Native

Pacific Template Family

Skye Template Family

Supply

Tremont Template Family

Wells

Wexley

York Template Family

Squarespace 7.1

Share this post:

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

Leave a Comment Cancel reply

@tuanphan

Resources

BEAVER HERO

Free answer within 24 hours. Send your questions now ->

Adirondack

Avenue

Aviator

Bedford Template Family

Brine Template Family

Farro

Five

Flatiron

Forte

Galapagos

Ishimoto

Momentum

Montauk Template Family

Native

Pacific Template Family

Skye Template Family

Supply

Tremont Template Family

Wells

Wexley

York Template Family

Squarespace 7.1

Share this post:

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

Leave a Comment Cancel reply

Ask me a question, free

@tuanphan

Resources