Greetings! This marks my debut post on this platform.
I've encountered a minor setback with the current website project I am working on. As I have implemented a CSS parallax header, I aimed to create a distinctive footer as well.
The concept was to affix it at the bottom and let the body gradually reveal the footer base first. However, an issue arose where the footer appeared between multiple segments of the site.
To address this concern, I attempted to insert a background between the segments using the following code:
.background {
color: #f1f1f1;
width: 100%;
height: 90%;
z-index: -2;
}
Describing my footer, here is the structure:
.footer {
padding: 40px 0;
text-align: center;
text-decoration: none;
background: black;
color: #white;
position: fixed;
bottom: 0;
width: 100%;
z-index: -1;
}
Regardless of any z-index value I experiment with, the footer either remains completely in the background or overshadows everything else.
At present, I'm uncertain about other potential methods to explore.
Below is a snippet of my (abbreviated) HTML body (preceded only by the header and a navigation bar):
<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>
Given that my website supports various languages, I utilize PHP variables extensively throughout its content.
For your reference, here's a screenshot demonstrating the problem without my attempted solution:
https://i.sstatic.net/hXeNU.png
If necessary, I can provide additional sections of my code upon request. Just specify which components you are interested in reviewing (to avoid unnecessarily long posts).