Взаимодействия с фоном блокируются Div на фоне

Question

Я использую Particles.js на заднем плане. У меня есть слой div на холсте, который содержит текст и изображения.

Этот div блокирует взаимодействие с фоном, убивая опыт. Есть ли способ убедиться, что div позволяет взаимодействовать через него с фоном. Выше и ниже Div, взаимодействия работают хорошо, так как контент вертикально центрирован.

Демо-ссылка

Answer 1

Я вижу этот CSS в вашем коде. (строка № 19)

#hero-unit .particles-js-canvas-el {
    z-index: -1 !important;
}

Измените это на

#hero-unit .particles-js-canvas-el {
    z-index: 1 !important;
}

а также

#hero-unit #hero-wrapper {
    z-index: 1!important;
}

ИСПРАВИТЬ, чтобы взаимодействие происходило через текст или рядом с ним

оберните div отдельно .col-md-9 rows

<div class="row">
    <!--  first row -->
    <div class="col-md-9">
        <img class="hero-logo hidden-xs" src="http://creo.mink7.com/wp-content/themes/creo/images/logo-home.png" alt="">
        <h1 class="head">Together we can Make a universe of smart innovations for a Better tomorrow</h1> 
    </div>

    <!--  second row -->
    <div class="col-md-9 newsletter">
        <div id="frontpage-mailchimp">
            <h4>Join the Community of Makers</h4>

            <!-- MailChimp for WordPress v3.0.10 - https://wordpress.org/plugins/mailchimp-for-wp/ -->
            <form id="mc4wp-form-1" class="mc4wp-form mc4wp-form-114" method="post" data-id="114" data-name="Join us in making things better">
                <!--  mailchimp stuffs -->
            </form>
        </div>
    </div>
</div>

и, наконец, этот css

 #hero-wrapper .col-md-9{
        z-index: 1; // reduce the default z-index for div
    } 

#hero-wrapper .col-md-9.newsletter{
    z-index: 9999; // increase the z-index for newletter div only
 }