I am planning to align the background on a button to the background on the body and blur out the button to create a frosty glass effect kinda thing.

But I can't get them to align properly.

```css
*{
  padding:0px;
  margin:0px
}

body{
  width:100vw;
  height:100vh;
  background:red;
 /*center the button*/
  display:flex;
  justify-content:center;
  align-items:center;
  /*background image properties*/
  background-image:url('https://s-media-cache-ak0.pinimg.com/originals/98/a5/cf/98a5cf91e8aef10a2b81303a7ccbce9e.jpg');
  background-size:cover;
  background-position:center center;
}

.button{
  display:block;
  height:200px;
  width:200px;
  background:blue;
  border-radius:10px;
  /*enter the f inside the box*/
  display:flex;
  justify-content:center;
  align-items:center;
 /*size of the f*/
  font-size:180px; 
  /*frosty glass effect*/

}

.position{
  position:relative;
  left:30px;
  top:24px;

  color:white;
}
```

```html
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<a class='button'><i class="fa fa-facebook position"></i></a>
```

The larger issue is I want a background image in the blue part aligned with the background behind it. Then blur out the blue background without blurring not white "f" logo.

The effect should be similar to this example image, except that the icon should not be translucent:

[![enter image description here](https://i.stack.imgur.com/HEeDx.png)](https://i.stack.imgur.com/HEeDx.png)