<div class="container">
  <div class="frosted">
    This overlay has a frosted glass effect in compatible browsers
  </div>
</div>

.frosted{
  position: absolute; 
  top: 30px; bottom: 30px; right: 30px; left: 30px;
  margin: auto;
  
  background: rgba(255, 255, 255, 0.9);
  
  display: flex;
  align-items: center;
  justify-content: center;
  
  font-size: 1.2rem;
  padding: 20px;
  text-align: center;
}

@supports (backdrop-filter: none) {
  .frosted {
      background: rgba(255, 255, 255, 0.3);
      backdrop-filter: blur(8px);
  }
}

.container{
  background: url('https://placeimg.com/640/480/nature') no-repeat;
  position: absolute;
  top:0; bottom:0; right:0; left:0;
  margin: auto;
  max-width: 640px; max-height: 480px;
}

body{
  background: #222;
}

*{
  box-sizing: border-box;
}