Fixed header with blur effect,what i am doing wrong?

I am trying to make a page like this

Header should be fixed, and bg-image should be fixed too, I did that. The only problem I have is, how to make exactly the same blur. What am I doing wrong?

Here is my code

<body>
    <div class="main">
      <div class="bg-image">
        <div class="header"></div>
      </div>
      <div class="content">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam cumque, esse eum facere illum iste maxime neque omnis saepe temporibus totam veritatis! Asperiores, dignissimos illum in labore libero nihil saepe!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam cumque, esse eum facere illum iste maxime neque omnis saepe temporibus totam veritatis! Asperiores, dignissimos illum in labore libero nihil saepe!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam cumque, esse eum facere illum iste maxime neque omnis saepe temporibus totam veritatis! Asperiores, dignissimos illum in labore libero nihil saepe!</p>
      </div>
    </div>
  </body>

And here is SASS

@mixin background($imgpath,$position:0 0,$repeat: no-repeat)
  background:
    image: url($imgpath)
    position: $position
    repeat: $repeat

html, body
  height: 100%
  width: 100%
  padding: 0
  margin: 0

.bg-image
  @include background('http://imgur.com/sTO5GYX')
  background-size: cover
  background-attachment: fixed
  display: block
  height: 500px
  width: 100%
  z-index: 1
  .header
    @include background('http://imgur.com/sTO5GYX')
    position: fixed
    top: 0
    left: 0
    z-index: 2
    background: rgba(153, 184, 208, 0.3)
    height: 50px
    display: block
    width: 100%
    filter: blur(2px)
.content
  height: 1500px
  display: block
  width: 100%
  text-align: center

Solution

2023 UPDATED ANSWER USING background-filter instead:

body {
  width: 100vw;
  height: 100vh;
  background-color: rgb(255,204,255);
  margin: 0%;  
}
    
.bg1 {
  width: 100%;
  height: 100%;
  background-image: url('http://i.imgur.com/tWZjcIp.jpg');
  background-repeat: no-repeat;
  background-size: cover;
}

.bg2 {
  width: 100%;
  height: 20%;
  position: absolute;
  top: 0px;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  background: rgba(255, 255, 255, 0.1);
}

<div class="bg1"></div>
<div class="bg2"></div>

OLD ANSWER:

Layers:
1- regular background image;
1.5- solid color layer to avoid blured borders when facing a white background;
2- clone of this with blur (reduced height);
3- white layer with low opacity (reduced height);

The use of the brightness filter on the layer 2 is optional (according to the pic):

  -webkit-filter: blur(5px) brightness(120%); /* Chrome, Safari, Opera */
  filter: blur(5px) brightness(120%);

jsfiddle 1 - regular bg;

jsfiddle 2 - white bg;

body {
  width: 100vw;
  height: 100vh;
  background-color: rgb(255,204,255);
  margin: 0%;  
}
    
.bg1 {
  width: 100%;
  height: 100%;
  background-image: url('http://i.imgur.com/tWZjcIp.jpg');
  background-repeat: no-repeat;
  background-size: cover;
}

.bg1_5 {
  width: 100%;
  height: 20%;
  position: absolute;
  top: 0px;  
  background: rgba(174,116,187,0.5);
  background-repeat: no-repeat;
  background-size: cover;
}

.bg2 {
  width: 100%;
  height: 20%;
  position: absolute;
  top: 0px;  
  background-image: url('http://i.imgur.com/tWZjcIp.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  -webkit-filter: blur(5px); /* Chrome, Safari, Opera */
  filter: blur(5px);
}

.bg3 {
  width: 100%;
  height: 20%;
  position: absolute;
  top: 0px;  
  background: rgba(255,204,255,0.1);
  background-repeat: no-repeat;
  background-size: cover;
}

<div class="bg1"></div>

<div class="bg1_5"></div>

<div class="bg2"></div>

<div class="bg3"></div>