<div

    class="vh-100 parallax"

    data-mdb-scale="1.3"

    data-mdb-image-src="https://mdbootstrap.com/img/Photos/Slides/4.jpg"

    data-mdb-delay="2"

    data-mdb-horizontal-alignment="center"

​

>

    <div class="parallax-content">

        <div class="container">

            <div class="row d-md-flex flex-wrap align-items-center">

                <div class="col-lg-6 py-5">

                  <div class="p-3 card">

                    <h2 class="">I am visible</h2>

                    <p>because I'm a card. parallax should be horizontally centered</p> 

                    <p><strong>Please check me on a wide screen!</strong> In standard fullscreen view the image should fill the whole horizontal space (even if smaller image)</p>

                    <p>The div below me is not visible. It is not a card.</p>

                  </div>

​

                  <div style="z-index:1 ">

                        <h2 class="">I am invisible :-(</h2>

                    </div>

                </div>

            </div>

        </div>

    </div>

</div>

​

​

​