Frosted Background

html

<div id="frosted-background" class="full with-scroll">
  <div class="full blured"></div>
  <div class="full">
    <section class="section">
    <div class="container">
      <!-- alguma coisa-->
    </section>
  </div>
</div>

css

#frosted-background {
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  position: fixed;
  background-image: url("img/output/japan-market-osaka-1160297-lg_2x.webp");
  background-size: cover;
}

.full {
  position: fixed;
  width: 100%;
  height: 100%;
}

.full.with-scroll {
  overflow-y: auto;
}

.blured {
  backdrop-filter: blur(12px) brightness(1.5);
  background-color: rgba(255, 255, 255, 0.5);
}