ScrollMagic: How to place content on top of parallax background

Question

So I am having an issue with building a vertical parallax scrolling website.

At the moment I am using ScrollMagic to create parallax sections, and it works perfectly. The issue comes when I try to put content on top of it. For my situation I am using Bootstrap's .container so I can put my content in different rows,columns and etc.

I can see the flaw, it is in the structure itself but I am trying to find a way how to hack it, any ideas?

<!-- Main Container -->
<div id="fullpage">
<div class="spacer s0"></div>
<!-- Section -->
<div class="section">
    <div class="absolute main-wrapper container">

        <div class="row">
        <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi amet asperiores, illo sapiente, magni fuga distinctio quisquam tenetur error natus accusantium cum veniam voluptatem! Id qui at quas culpa facere.</p>
        </div>
    </div>

<div id="parallax1" class="parallaxParent">
<div style="background-image: url(img/bcg_slide-1.jpg);">
</div>
</div>
</div>
<!-- /Section -->
<!-- Section -->
<div class="spacer s1">
<div class="box2 blue">
<p>Content 1</p>
</div>
</div>
<!-- /Section -->
<!-- Section -->
<div class="spacer s0"></div>
<div class="section">
<div id="parallax2" class="parallaxParent">
<div style="background-image: url(img/bcg_slide-2.jpg);"></div>
</div>
</div>
<!-- /Section -->
<div class="spacer s1">
<div class="box2 blue">
<p>Content 2</p>
</div>
</div>
<div class="spacer s0"></div>
<!-- Section -->
<div class="section">
<div id="parallax3" class="parallaxParent">
<div style="background-image: url(img/bcg_slide-3.jpg);"></div>
</div>
</div>
<!-- /Section -->
</div>

So If I put my div before the background parallax image, It overlaps parallax image, and creates a white container with text. I have done position absolute, but that means I cannot use bootstrap's grid.

I tried putting inside the div with parallax background.

I am opened to ideas.

Andrejs Gubars · Answer 1 · 2016-02-10T20:45:28.600

I have actually cracked it. It was much simpler than I thought.

In my code, I just declared a <div> with position: absolute;, width: 100%; and z-index: 1; like this.

<div class="section">
  <div style="position: absolute; width: 100%; z-index: 1;">
    <div class="container">
      <div class="row">
        <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea fugiat officiis aspernatur deserunt molestias debitis placeat ratione fugit sed. Rem consectetur facilis maiores facere velit error eos quisquam dolorem aliquam.</p>
        </div>
      </div>
</div>
                <div id="parallax2" class="parallaxParent">
                    <div style="background-image: url(img/parallax_bg2.png);"></div>
            </div>
</div>

So this creates a <div> on top of my <div> with parallax image. It has been tested on multiple sections and it works. Simple. duh...

ScrollMagic: How to place content on top of parallax background

1 Answers1