I am trying to get my baner to look like this, where the Header is transparent but also blurrs out the background:
I have tried multiple answers that were already posted on here, but I just get it to this point and I can’t figure out why my header isn’t blurry:
Could someone help me figure out why it doesn’t work? I used this css code:
sticky-header{
backdrop-filter: blur(80px);
background-color: rgba(250, 250, 250, 0.20);
}
@Paul222 url?
@Paul222 i think already fixed
On my page it still doesn’t look blurry, only transparent 
Could you maybe share a screenshot, if it looks any different on your end?
What could be the reason that it doesn’t look like that on mine than?
please check in private window and let me know @Paul222
@Paul222 okay let me check
Thank you very much, did you find anything?
@Paul222 just to confirm, are you currently using a MacBook
Correct, yes
@Paul222 oh let me check on macbook
@Paul222 not working on macbook
@Paul222
please add this line in your backgrounf code didnt remove anything else
-webkit-backdrop-filter: blur(50px);
Add it to the header background code or the general background code?
@Paul222 add in base.css
#shopify-section-sections--23729334714714__header sticky-header{
-webkit-backdrop-filter: blur(80px);
}
Still doesn’t work ;(
Could you please give me a complete code for the banner to look like this:
Maybe my code has a mistake preventing it from working correctly…
@Paul222 is it possible for you
For more direct communication, you can reach out via messaging
