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

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.

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;
}