fixed hidden footer showing though background - html

Question

this is my first post here.
I've got a small problem with the website I'm working on at the moment.
Since I'm using a (css) parallax header I wanted to have a "special" footer as well.
The idea was to make it fixed to the bottom and let the body reveal the footer bottom first.
The problem is that my website is made up of multiple segments and the footer is visible in between them.
I tried to fix this by creating a background between the segments like this
.background {
color: #f1f1f1;
width: 100%;
height: 90%;
z-index: -2;
}
my footer looks like this
.footer {
padding: 40px 0;
text-align: center;
text-decoration: none;
background: black;
color: #white;
position: fixed;
bottom: 0;
width: 100%;
z-index: -1;
}
but whichever z-index I try, the footer is either completely in the background or in front of everything.
I don't really know what else I could try.
Here's my (shortend) HTML body (there's only the header and a navbar before that):
<div class="main">
<div class="row">
<div class="leftcolumn">
<div class="card">
<h1><?php echo $welcome1;?></h1>
<h5><?php echo $post;?></h5>
<p><?php echo $welcome2;?></p>
</div>
<div class="card">
<h2>Hiragana</h2>
<h5><?php echo $post;?></h5>
<img src="..//nihongo/pics/hiragana.png" width="650px" height="400px">
<p><?php echo $hira;?></p>
</div>
<div class="card">
<h2>Katakana</h2>
<h5><?php echo $post;?></h5>
<img src="..//nihongo/pics/katakana.png" width="650px" height="400px">
<p><?php echo $kata;?></p>
</div>
</div>
<div class="rightcolumn">
<?php include '../nihongo/php/language.php'; ?>
<div class="card">
<h2><?php echo $me1;?></h2>
<img src="../nihongo/pics/me.png" width="240px" height="322px" style="border: 1px solid black;border-radius:10px;">
<p><?php echo $me2;?></p>
</div>
<div class="card">
<h3><?php echo $use;?></h3>
<div class="fakeimg"><p>Hiragana</p></div><br/>
<div class="fakeimg"><p>Katakana</p></div><br/>
<div class="fakeimg"><p>Kanji</p></div><br/>
</div>
<?php include '../nihongo/php/follow.php';?>
</div>
</div>
</div>
<?php include '../nihongo/php/footer.php';?>
</body>
I'm using all those PHP variables because I'm running this website in multiple languages.
here is a screenshot of the issue without my "fix":
I can provide you more of my code if you want - just tell me what you want to see (I don't want to make this post too long right now).

Answer 1

You could define a white (?) background for .main and add a margin-bottom to .main whose value equals the height of the footer. That way the footer would only become visible after .main is scolled down all the way, in the space that is defined as its margin-bottom.