.box
  .backdrop
  .box-content
    | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere quis, id, eligendi molestias et, autem quibusdam earum repudiandae consequuntur provident quam eum perferendis vel vitae possimus? Aut necessitatibus dolore nemo!
    
svg(xmlns='http://www.w3.org/2000/svg', version='1.1').sr-only
  defs
    filter#blur
      fegaussianblur(stddeviation='2')
View Compiled
$bgi-url: 'https://wi1d5ky.github.io/DailyUI/pages/Andy19910102%20-%20SignUp/271_rocky_ocean_coast.jpg';
$blur-size: 10px;

%bg {
  width: 100vw;
  height: 100vh;
  z-index: -1;    
  background: url(#{$bgi-url}) 50% / cover no-repeat;
}

/// reset

*,
*::before,
*::after {
  box-sizing: inherit;
}

html {
  height: 100%;
  box-sizing: border-box;
}

body {
  position: relative;  
  min-height: 100vh;
  margin: 0;
  padding-top: 10vh;
  
  &::before {
    @extend %bg;
    content: '';
    position: fixed;
    top: 0;
    left: 0;
  }
}

.box {
  position: relative;
  width: 70%;
  height: 80vh;
  margin: 0 auto;
  overflow: hidden;
  border-radius: .5em;
  color: #fff;
  background-color: rgba(#000,.2);
  box-shadow: 0 .5em 2.5em -.5em rgba(0,0,0,.75);

}

.box-content {
  position: absolute;
  top: 0;left: 0;right: 0;bottom: 0;
  overflow: auto;
  padding: 1em;
  font-size: 1.5em;
}

.backdrop {
  @extend %bg;
  position: absolute;
  top: -10vh;
  left: 50%;
  transform: translateX(-50%);
  filter: url('#blur');

  @supports (backdrop-filter: blur(1px)) {
    backdrop-filter: blur(#{$blur-size});
    filter: none;
  }
  
  @supports (-webkit-filter: blur(1px)) and ( not (backdrop-filter: blur(1px) )) {
    filter: blur(#{$blur-size});
  }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.