<style>

  .gradient-custom {

    /* fallback for old browsers */

    background: #a18cd1;

​

    /* Chrome 10-25, Safari 5.1-6 */

    background: -webkit-linear-gradient(

      45deg,

      rgba(29, 236, 197, 0.6),

      rgba(91, 14, 214, 0.6) 100%

    );

​

    /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

    background: linear-gradient(

      45deg,

      rgba(29, 236, 197, 0.6),

      rgba(91, 14, 214, 0.6) 100%

    );

  }

</style>

​

<!-- Background image -->

<div

     class="bg-image"

     style="

            background-image: url('https://mdbootstrap.com/img/new/fluid/nature/011.jpg');

            height: 100vh;

            "

     >

  <div class="mask gradient-custom">

    <div class="d-flex justify-content-center align-items-center h-100">

      <h1 class="text-white mb-0">Page title</h1>

    </div>

  </div>

​

</div>

<!-- Background image -->