DustinSoper Posted July 20, 2020 Share Posted July 20, 2020 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 Link to comment
tuanphan Posted July 22, 2020 Share Posted July 22, 2020 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; } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Vncent Posted July 22, 2020 Share Posted July 22, 2020 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! Link to comment
tuanphan Posted July 24, 2020 Share Posted July 24, 2020 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> Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Vncent Posted July 24, 2020 Share Posted July 24, 2020 Thank you! I'd like to do both, change the product description page and the ALL products page Link to comment
Vncent Posted July 24, 2020 Share Posted July 24, 2020 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! Link to comment
tuanphan Posted July 25, 2020 Share Posted July 25, 2020 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! Website Expired This account has expired. If you are the site owner, click below to login. Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
DustinSoper Posted July 25, 2020 Author Share Posted July 25, 2020 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! Link to comment
tuanphan Posted July 26, 2020 Share Posted July 26, 2020 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> Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Vncent Posted July 26, 2020 Share Posted July 26, 2020 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! Link to comment
DustinSoper Posted August 5, 2020 Author Share Posted August 5, 2020 On 7/25/2020 at 8:52 PM, tuanphan said: <style> #page section * { color: white !important; } </style> Thank you very much! Link to comment
Vncent Posted September 8, 2020 Share Posted September 8, 2020 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! Link to comment
tuanphan Posted September 12, 2020 Share Posted September 12, 2020 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? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
KaelaT Posted January 11, 2022 Share Posted January 11, 2022 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! Link to comment
tuanphan Posted January 12, 2022 Share Posted January 12, 2022 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> Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
KaelaT Posted January 20, 2022 Share Posted January 20, 2022 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! Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment