Jump to content

Can't add a background image in site header on product pages

Recommended Posts

I'm helping a relative with their web site and I added a background image to the site header by changing the background on a small section right below the header.  Then I noticed on the product pages there doesn't seem to be a way to do that, so it looks really strange going from the other pages with a background in the header to a product page and the site header is the same as the background color with no image.  Is there a way to make it uniform on the product pages?

Example here on the shop page with a background in the header:

https://www.hcfreezedry.com/shop-all

Then on a product page there is no background:

https://www.hcfreezedry.com/shop-all/p/freeze-dried-key-lime-taffy

Attached is what it looks like in the website builder on non-product pages, but there is no option for background or to add a section on the product pages.

ssedit.png

Edited by badcrc
Link to comment
  • Replies 1
  • Views 469
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

Add to Design > Custom CSS

body[class*="type-products"].view-item header#header {
    background-image: url(https://images.squarespace-cdn.com/content/v1/63c72045eba8f33ee52eb87b/1674019749482-IFGA9YQJ8380EPQY23AV/SOUR+SKITTLES.jpg?format=original) !important;
    background-color: transparent !important;
    background-size: contain;
    background-repeat: repeat-x;
}
.collection-type-products.view-item.tweak-transparent-header .header .header-announcement-bar-wrapper {
    background-color: transparent !important;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.