image mask / masked image alternative for blurred menu element?

Question

I am trying to achieve this effect:

the menu has position fixed and will not scroll, it will overlap and the blur should correspond to the underlying part of the image.

I checked out filter blur but it seems to be buggy in chrome, does not work at all in IE (i don't really care actually) and I am not really sure about other browsers.

I checked out as well this link about using gradients but it seems to apply only to round objects without a background image as possible background.

I thought about using an mask-image but development just isn't there yet (firefox does not support it) as it seems (again, I wouldn't care at all if IE fails, but if others fail too...)

So, what would be the best way to achieve this effect?

EDIT: an example image would be this one: http://img.youtube.com/vi/zXgyoDAuaH0/maxresdefault.jpg

and here the blurred image

(just open in new window and download)

it is allowed to use a generated blurred image

Answer 1

I ended up using js to scroll the background position

HTML

<div class="content"> 
  <div class="menu"> x
</div>
</div>

CSS

.content{
  position: relative;
 height: 10000px;
  background: url('http://img.youtube.com/vi/zXgyoDAuaH0/maxresdefault.jpg') 0 0;
}

.menu{
  top: 20px;
  left: 20px;
  height: 100px;
  width: 500px;
  background: url('https://i.stack.imgur.com/3xgJ7.jpg');
  background-position: -20px -20px;
  border: 1px solid red;
  position: fixed;
}

JS

$(document).on("scroll", function() {
  console.error();
  $(".menu").css({
    backgroundPosition: "-20px " + (-13 - $(window).scrollTop()) + "px"
  });
});