<header>

​

    <section>

      <div class="bg-image h-100" style="background-image: url(https://mdbootstrap.com/img/Photos/new-templates/glassmorphism-article/img2.jpg); ">

        <div class="mask mask-custom d-flex align-items-center h-100">

          <div class="container">

            <div class="row justify-content-center text-center text-white">

              <div class="col-12">

                <h1>This is the glassmorphism effect on the background</h1>

              </div>

            </div>

          </div>

        </div>

      </div>

    </section>

​

  </header>