Jump to content

How to add a filter to header images only?

Go to solution Solved by Lesum,

Recommended Posts

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.

Screenshot 2024-06-20 at 17.49.18.png

Screenshot 2024-06-20 at 17.55.35.png

Edited by atmos
Additional query
Link to comment

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

 

If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. 

Sam
Web Developer & Digital Designer

 Did you find my contribution helpful? Buy me a coffee?

Link to comment

@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

Link to comment
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. 

If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. 

Sam
Web Developer & Digital Designer

 Did you find my contribution helpful? Buy me a coffee?

Link to comment
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;
}

 

Screenshot 2024-06-22 at 14.50.04.png

Link to comment
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;
    }
}

 

Link to comment
Posted (edited)

@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 by atmos
Link to comment
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

Link to comment

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

If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. 

Sam
Web Developer & Digital Designer

 Did you find my contribution helpful? Buy me a coffee?

Link to comment
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

Link to comment
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.

Link to comment
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

Link to comment

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

 

If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. 

Sam
Web Developer & Digital Designer

 Did you find my contribution helpful? Buy me a coffee?

Link to comment

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.

Link to comment

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 by Lesum

If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. 

Sam
Web Developer & Digital Designer

 Did you find my contribution helpful? Buy me a coffee?

Link to comment
  • Solution

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

 

If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. 

Sam
Web Developer & Digital Designer

 Did you find my contribution helpful? Buy me a coffee?

Link to comment

@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. 

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.