Blur everything behind header nav bar

Hi!
I'd like to create a backdrop filter blur on the top bar of my website that blurs the photos underneath as the page is scrolled.
I've added this CSS to the entire site:
It's not working... What am I doing wrong?
Here's what I want:

www.JordanSternPhotography.com
I'd like to create a backdrop filter blur on the top bar of my website that blurs the photos underneath as the page is scrolled.
I've added this CSS to the entire site:
.sm-page-layout-region-top { -webkit-backdrop-filter: blur(10px); }
It's not working... What am I doing wrong?
Here's what I want:

www.JordanSternPhotography.com
0