Product Page Background

Site URL: https://coral-magnolia-tk74.squarespace.com/mercantile/hearts-diamonds-and-spades-wav-format-n65r2

Hello!

I am hoping that someone here can help me.

I am trying to set a background on an individual product page so that it looks like the rest of my site.

For example, here's how I'd like it to look:

https://coral-magnolia-tk74.squarespace.com/mercantile

And here's how it looks currently.

https://coral-magnolia-tk74.squarespace.com/mercantile/hearts-diamonds-and-spades-wav-format-n65r2

The password for my site is protected.

Thanks in advance!
-Dustin

Add to Home > Design > Custom CSS

body#item-5f089e540ecc34541510508d #page section:first-child .section-background {
    background-image: url(https://beaverhero.com/wp-content/uploads/2020/06/twitter-292994_640.jpg);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

Hi @tuanphan,

I have a similar question, is there a way for me to add a background image to a products section? This is the site:

https://prism-chameleon-jrjb.squarespace.com/
Pass: doggydog

Thanks in advance!

On 7/23/2020 at 2:18 AM, Vncent said:

Hi @tuanphan,

I have a similar question, is there a way for me to add a background image to a products section? This is the site:

https://prism-chameleon-jrjb.squarespace.com/
Pass: doggydog

Thanks in advance!

A product or all product?

All products, add to Page Settings > Advanced > Header

<style>
  .view-item #page section:first-child .section-background {
    background-image: url(https://beaverhero.com/wp-content/uploads/2020/06/twitter-292994_640.jpg);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}
</style>

Thank you! I'd like to do both, change the product description page and the ALL products page

Hi @tuanphan

I tried the code you provided and added it to header injection, both with the example image you provided and later with one of my own and neither worked. The product page grid still has a solid color background. Any thoughts? Thank you!

19 hours ago, Vncent said:

Hi @tuanphan

I tried the code you provided and added it to header injection, both with the example image you provided and later with one of my own and neither worked. The product page grid still has a solid color background. Any thoughts? Thank you!

Hi @tuanphan! This header code injection actually worked for me! Thank you very very much!  Can you provide any code that can help me change my text and links to white on that background area? Here's a look at how it is now: https://coral-magnolia-tk74.squarespace.com/mercantile/hearts-diamonds-and-spades-wav-format (Password: protected)

Thank you again very much!

9 hours ago, DustinSoper said:

Hi @tuanphan! This header code injection actually worked for me! Thank you very very much!  Can you provide any code that can help me change my text and links to white on that background area? Here's a look at how it is now: https://coral-magnolia-tk74.squarespace.com/mercantile/hearts-diamonds-and-spades-wav-format (Password: protected)

Thank you again very much!

<style>
  #page section * {
    color: white !important;
}
</style>

Hi @tuanphan

Sorry, that test site expired, but I copied it over:

https://magnolia-sealion-b27w.squarespace.com/
Pass: doggydog

I tried the code but nothing appears, I added some CSS i found to change the font in the products page, that might be causing a problem. Thanks for any help!

On 7/25/2020 at 8:52 PM, tuanphan said:

<style>
  #page section * {
    color: white !important;
}
</style>

 

Thank you very much!

Hi @tuanphan,

I'm still trying to get a background image on my store page, I tried the code you suggested above but that didn't work. Would you mind checking it out again?

The page is:

https://lime-koala-f88e.squarespace.com/

pass: doggydog

Thank you in advance!

On 9/8/2020 at 12:06 PM, Vncent said:

Hi @tuanphan,

I'm still trying to get a background image on my store page, I tried the code you suggested above but that didn't work. Would you mind checking it out again?

The page is:

https://lime-koala-f88e.squarespace.com/

pass: doggydog

Thank you in advance!

Hi. I see you solved. Do you still need help on this?

On 7/24/2020 at 9:54 AM, tuanphan said:

A product or all product?

All products, add to Page Settings > Advanced > Header

<style>
  .view-item #page section:first-child .section-background {
    background-image: url(https://beaverhero.com/wp-content/uploads/2020/06/twitter-292994_640.jpg);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}
</style>

 

Hi @tuanphan! I used this code to change the background of my product pages and it worked great! However I have found it adds the same background image to my blog posts. Is it possible to only target the product pages and not the blog posts?

Thank you!

On 1/11/2022 at 5:19 PM, KaelaT said:

Hi @tuanphan! I used this code to change the background of my product pages and it worked great! However I have found it adds the same background image to my blog posts. Is it possible to only target the product pages and not the blog posts?

Thank you!

use this new code

<style>
  body.collection-type-products.view-item #page section:first-child .section-background {
    background-image: url(https://beaverhero.com/wp-content/uploads/2020/06/twitter-292994_640.jpg);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}
</style>

On 1/12/2022 at 10:34 AM, tuanphan said:

use this new code

<style>
  body.collection-type-products.view-item #page section:first-child .section-background {
    background-image: url(https://beaverhero.com/wp-content/uploads/2020/06/twitter-292994_640.jpg);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}
</style>

 

Thank you this worked perfectly!