How to add a filter to header images only?

atmos · June 20

Hi,

I have added some headers to the cart and product page but I want to add a code similar to the one below so that the navigation text is easier to read. Screenshot attached to help with this.

filter:brightness(40%)

When I try to add this line of code, it ends up affecting both the image and anything else in the header (announcement bar and navigation text etc).

I want to add the correct code into here somehow:

body[class*="type-products"].view-item header#header {
    background-image: url(https://images.squarespace-cdn.com/content/65e71d12deef391e74f7afcd/1716200250958-WEXYTWMCD2HP3ZJOYYKE/Untitled+%23126+%281%3A3%29.jpg?content-type=image%2Fjpeg);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    height: 51.4vh;
}

Any help would be most welcome

Thank you

EDIT: While on this topic, does anyone know how I can add a heading to these headers using CSS so that they look the same as the ones on my other pages. I’d like to add “Product” to the product page header and “Cart” to the cart page header. I have attached another screenshot to show you how I want it to look like based on another page.

Edited June 20 by atmos
Additional query

tuanphan · June 22

Can you share site url?

atmos · June 22

@tuanphan

Hi, yeah sure. Here’s some links to a product page and the cart page.

https://www.atmos.productions/store/p/poetry-for-the-blind-paperback

https://www.atmos.productions/cart

Edited June 22 by atmos

Lesum · June 22

@atmos Hi! The line of code you mentioned won't work to add a filter to the header background image. It required a lot more code, modifying several elements on both the mobile and desktop versions of the site. Here's the code you can add under Custom CSS to apply a filter to header background images on individual product pages:

body[class*="type-products"].view-item header#header .sqs-announcement-bar {
    height: 49px !important;
    min-height: unset !important;
}

body[class*="type-products"].view-item header#header .sqs-announcement-bar-dropzone {
    min-height: unset !important;
}

body[class*="type-products"].view-item header#header .header-announcement-bar-wrapper {
    height: calc(100% - 49px) !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

body[class*="type-products"].view-item header#header:has(.sqs-announcement-bar-hidden) .header-announcement-bar-wrapper {
    height: 100% !important;
}

body[class*="type-products"].view-item header#header .header-dropshadow {
    height: 100%;
    background: #000 !important;
    opacity: 0.75 !important;
}

body[class*="type-products"].view-item header#header .header-inner {
    align-items: flex-start !important;
    height: 100% !important;
}

/* Mobile styles */
@media screen and (max-width: 767px) {
    body[class*="type-products"].view-item header#header .sqs-announcement-bar {
        height: 100px !important;
    }

    body[class*="type-products"].view-item header#header .header-announcement-bar-wrapper {
        height: calc(100% - 100px) !important;
    }
}

atmos · June 22

@Lesum Hi, so just to check, will that code affect all of the product pages which currently use the same header image? If I want to do the same for the cart page, could I replace

body[class*="type-products"]

with

#cart

to get the same effect?

Thank you

Lesum · June 22

1 minute ago, atmos said:
@Lesum Hi, so just to check, will that code affect all of the product pages which currently use the same header image? If I want to do the same for the cart page, could I replace
body[class*="type-products"]
with
#cart
to get the same effect?

Thank you

Yes, you're correct.

atmos · June 22

Just now, Lesum said:

Yes, you're correct.

Thank you. That code seems to work but it only covers part of the header image. Do you know how to make the box extend to cover the full image?

This is the code I have for the image and height if that helps

body[class*="type-products"].view-item header#header {
    background-image: url(https://images.squarespace-cdn.com/content/65e71d12deef391e74f7afcd/1716200250958-WEXYTWMCD2HP3ZJOYYKE/Untitled+%23126+%281%3A3%29.jpg?content-type=image%2Fjpeg);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    height: 51.4vh;
}

Lesum · June 22

Can you add the code so I can check?

atmos · June 22

1 minute ago, Lesum said:

Can you add the code so I can check?

Sure. This is the code for the header image on the product page.

body[class*="type-products"].view-item header#header {
    background-image: url(https://images.squarespace-cdn.com/content/65e71d12deef391e74f7afcd/1716200250958-WEXYTWMCD2HP3ZJOYYKE/Untitled+%23126+%281%3A3%29.jpg?content-type=image%2Fjpeg);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    height: 51.4vh;
}

body[class*="type-products"].view-item header#header {
.header-nav-item * {
    color: white;
}  
:not(.header--menu-open) .header-actions .icon--fill svg {
    fill: white !important;
}
span.sqs-cart-quantity {
    color: white;
}
a.btn {
    background: white;
    color: black;
}
.burger-inner>div {
    background-color: white !important;
}  
}

@media only screen (max-width: 1024px) {
    body[class*="type-products"].view-item header#header .header--menu-open .header-menu {
        padding-top: 170px !important;
    }
}

atmos · June 22

@Lesum Apologies, I misunderstood. I have already added the code and that is where I am at right now. This is in reference to my product page.

The code you shared adds a dark box but it only half covers the header image I added

Edited June 22 by atmos

atmos · June 22

2 minutes ago, Lesum said:

The code I just shared isn't appearing on the browser on my end. The code you're referring to was intended to add the background image. Did you add this code?

body[class*="type-products"].view-item header#header .sqs-announcement-bar {
    height: 49px !important;
    min-height: unset !important;
}

body[class*="type-products"].view-item header#header .sqs-announcement-bar-dropzone {
    min-height: unset !important;
}

body[class*="type-products"].view-item header#header .header-announcement-bar-wrapper {
    height: calc(100% - 49px) !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

body[class*="type-products"].view-item header#header:has(.sqs-announcement-bar-hidden) .header-announcement-bar-wrapper {
    height: 100% !important;
}

body[class*="type-products"].view-item header#header .header-dropshadow {
    height: 100%;
    background: #000 !important;
    opacity: 0.75 !important;
}

body[class*="type-products"].view-item header#header .header-inner {
    align-items: flex-start !important;
    height: 100% !important;
}

/* Mobile styles */
@media screen and (max-width: 767px) {
    body[class*="type-products"].view-item header#header .sqs-announcement-bar {
        height: 100px !important;
    }

    body[class*="type-products"].view-item header#header .header-announcement-bar-wrapper {
        height: calc(100% - 100px) !important;
    }
}

The code you're referring to from was to add the background image.

I did. It’s probably because I didn’t press save. Please check again as it should be there now

Lesum · June 22

@atmos Yes, now it's showing up. You did modify something in the code, which is why the filter is only showing halfway.

This part was modified:

body[class*="type-products"].view-item header#header .header-announcement-bar-wrapper {
    height: calc(51%) !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

atmos · June 22

4 minutes ago, Lesum said:
@atmos Yes, now it's showing up. You did modify something in the code, which is why the filter is only showing halfway.

This part was modified:
body[class*="type-products"].view-item header#header .header-announcement-bar-wrapper {
    height: calc(51%) !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

I didn’t modify that as far as I am aware. I just copied and pasted the code you shared. I have removed it and copy and pasted it again to see if that changes how it shows on your screen

Lesum · June 22

@atmos Also, did you remove the header announcement bar? When I was writing the code, the header had the announcement bar.

atmos · June 22

1 minute ago, Lesum said:

@atmos Also, did you remove the header announcement bar? When I was writing the code, the header had the announcement bar.

No, I just copied and pasted what you shared with me.

atmos · June 22

body[class*="type-products"].view-item header#header .sqs-announcement-bar {
    height: 49px !important;
    min-height: unset !important;
}

body[class*="type-products"].view-item header#header .sqs-announcement-bar-dropzone {
    min-height: unset !important;
}

body[class*="type-products"].view-item header#header .header-announcement-bar-wrapper {
    height: calc(100% - 49px) !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

body[class*="type-products"].view-item header#header:has(.sqs-announcement-bar-hidden) .header-announcement-bar-wrapper {
    height: 100% !important;
}

body[class*="type-products"].view-item header#header .header-dropshadow {
    height: 100%;
    background: #000 !important;
    opacity: 0.75 !important;
}

body[class*="type-products"].view-item header#header .header-inner {
    align-items: flex-start !important;
    height: 100% !important;
}

/* Mobile styles */
@media screen and (max-width: 767px) {
    body[class*="type-products"].view-item header#header .sqs-announcement-bar {
        height: 100px !important;
    }

    body[class*="type-products"].view-item header#header .header-announcement-bar-wrapper {
        height: calc(100% - 100px) !important;
    }
}

This is the code I added

Lesum · June 22

I just modified one thing in the code. Can you add this updated code?

body[class*="type-products"].view-item header#header .sqs-announcement-bar {
    height: 49px !important;
    min-height: unset !important;
}

body[class*="type-products"].view-item header#header .sqs-announcement-bar-dropzone {
    min-height: unset !important;
}

body[class*="type-products"].view-item header#header .header-announcement-bar-wrapper {
    height: 100% !important;
}

body[class*="type-products"].view-item header#header:has(.sqs-announcement-bar) .header-announcement-bar-wrapper {
    height: calc(100% - 49px) !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

body[class*="type-products"].view-item header#header .header-dropshadow {
    height: 100%;
    background: #000 !important;
    opacity: 0.75 !important;
}

body[class*="type-products"].view-item header#header .header-inner {
    align-items: flex-start !important;
    height: 100% !important;
}

/* Mobile styles */
@media screen and (max-width: 767px) {
    body[class*="type-products"].view-item header#header .sqs-announcement-bar {
        height: 100px !important;
    }

    body[class*="type-products"].view-item header#header:has(.sqs-announcement-bar) .header-announcement-bar-wrapper {
        height: calc(100% - 100px) !important;
    }
}

atmos · June 22

It looks like that did the trick. Thank you! Is the box set to the same size of the header even if the header gets made smaller (it probably wont but thought I’d ask.

Lesum · June 22

The box will adjust according to the header height. But it's still not working. It only works If you close the announcement bar. Code is supposed to adjust automatically. Can you try this updated code again?

body[class*="type-products"].view-item header#header .sqs-announcement-bar {
    height: 49px !important;
    min-height: unset !important;
}

body[class*="type-products"].view-item header#header .sqs-announcement-bar-dropzone {
    min-height: unset !important;
}

body[class*="type-products"].view-item header#header .header-announcement-bar-wrapper {
    height: 100% !important;
}

body[class*="type-products"].view-item header#header:has(.sqs-announcement-bar) .header-announcement-bar-wrapper {
    height: calc(~'100% - 49px') !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

body[class*="type-products"].view-item header#header .header-dropshadow {
    height: 100%;
    background: #000 !important;
    opacity: 0.75 !important;
}

body[class*="type-products"].view-item header#header .header-inner {
    align-items: flex-start !important;
    height: 100% !important;
}

/* Mobile styles */
@media screen and (max-width: 767px) {
    body[class*="type-products"].view-item header#header .sqs-announcement-bar {
        height: 100px !important;
    }

    body[class*="type-products"].view-item header#header:has(.sqs-announcement-bar) .header-announcement-bar-wrapper {
        height: calc(~'100% - 100px') !important;
    }
}

Edited June 22 by Lesum

atmos · June 22

@LesumI have updated it to the latest code you shared. Please let me know if that works on your side

Edited June 22 by atmos

atmos · June 22

@Lesum That's ok no need to apologise. I’m very grateful for your help! I have added the new code

Lesum · June 22

@atmos Now everything is working correctly.

atmos · June 22

@Lesum The new code moves the navigation bar to a different position in the header. I just noticed

It’s been moved up slightly

Edited June 22 by atmos

Lesum · June 22

@atmos Now it'll work I promise 🙂. Please add this updated code:

body[class*="type-products"].view-item header#header .sqs-announcement-bar {
    height: 49px !important;
    min-height: unset !important;
}

body[class*="type-products"].view-item header#header .sqs-announcement-bar-dropzone {
    min-height: unset !important;
}

body[class*="type-products"].view-item header#header .header-announcement-bar-wrapper {
    height: 100% !important;
}

body[class*="type-products"].view-item header#header:has(.sqs-announcement-bar) .header-announcement-bar-wrapper {
    height: calc(~'100% - 49px') !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
body[class*="type-products"].view-item header#header:has(.sqs-announcement-bar.sqs-announcement-bar-hidden) .header-announcement-bar-wrapper {
    height: 100% !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

body[class*="type-products"].view-item header#header .header-dropshadow {
    height: 100%;
    background: #000 !important;
    opacity: 0.75 !important;
}

body[class*="type-products"].view-item header#header .header-inner {
    align-items: flex-start !important;
    height: 100% !important;
}

/* Mobile styles */
@media screen and (max-width: 767px) {
    body[class*="type-products"].view-item header#header .sqs-announcement-bar {
        height: 100px !important;
    }

    body[class*="type-products"].view-item header#header:has(.sqs-announcement-bar) .header-announcement-bar-wrapper {
        height: calc(~'100% - 100px') !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    body[class*="type-products"].view-item header#header:has(.sqs-announcement-bar.sqs-announcement-bar-hidden) .header-announcement-bar-wrapper {
       height: 100% !important;
       padding-top: 0 !important;
       padding-bottom: 0 !important;
    }
}

atmos · June 22

@Lesum That's great. Thank you so much! Would you mind providing the altered code which I can apply the same settings to the cart page too? When I tried to change

body[class*="type-products"]

to

#cart

earlier, it didn’t apply the darkened box to the cart page.

How to add a filter to header images only?

Recommended Posts

Link to comment

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Popular Posts

Lesum

Lesum

Lesum

Posted Images

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Create an account or sign in to comment

Squarespace Webinars

Hire a Designer

Support

Community

Developers

Resources