I'm trying to create a parallax scroll effect not just for the background image but also for the text on my page. I managed to get it to work for the background image and tried using z-index for the various text but that hasn't worked either.
Is there a way to do this similar to what I've tried using just CSS or am I going down the complete wrong avenue/need to use JavaScript?
The HTML I've written is:
<!DOCTYPE html>
<html lang="en">
<head>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet">
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<link href="styles.css" rel="stylesheet">
</head>
<body>
<header>
<div class="about_me_background">
<div id="hyperlink_list" class="container centered ambroise_text" style="top: 5%; width: 1250px;">
<ul>
<li><a class="ambroise_text" style="font-weight: 500;" href="index.html">HOME</a></li>
<li><a class="ambroise_text" style="font-weight: 500;" href="">CV</a></li>
<li><a class="ambroise_text" style="font-weight: 500;" href="">SYNTHETIC CHEMISTRY</a></li>
<li><a class="ambroise_text" style="font-weight: 500;" href="">SOFTWARE DEVELOPMENT</a></li>
</ul>
</div>
<h1 class="centered ambroise_text bottom_border" style="font-size: 65px; width: 812.6px;">
MY NAME
</h1>
<p class="centered ambroise_text" style="letter-spacing: 4px; font-size: 35px; font-weight: 100; top: 52%;">
Interactive resume
</p>
</div>
<div class="background_white">
<div id="profile" class="container ambroise_text" style="color: #22A39F;">
<h2>Profile</h2>
<p class="lead ambroise_text" style="color: #727878;">
Synthetic chemist with a strong interest in software engineering
</p>
<hr>
<div class="col-md-4 ambroise_text">
<h3 style="color: #22A39F;">About me</h3>
<p style="color: #000000; letter-spacing: 4px; text-justify: auto;">
Since graduating in 2018 I have worked in the materials science industry specialising in organic synthetic chemistry and polymerisations. Specifically I work in the synthesis of fluorescent polymer nanoparticles for use in cancer diagnosis and general histopathology. I also have a keen interest in software development and
</p>
</div>
<div class="col-md-4 text-center">
<img src="" alt="photo of me" width="246" height="246">
</div>
<div class="col-md-4 ambroise_text">
<h3 style="color: #22A39F;">Details</h3>
<p>
</p>
</div>
</div>
</div>
</header>
</body>
</html>
And the relevant CSS code is:
.about_me_background{
background-image: url(https://i.sstatic.net/9HUSl.jpg);
background-size: cover;
width: 100%;
min-height: 100vh;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
}
.background_white{
background: #FFFFFF;
background-size: cover;
width: 100%;
min-height: 100vh;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
}
.centered{
position: fixed;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
.ambroise_text{
text-align: center;
font-family: ambroise-std, serif;
font-style: normal;
line-height: 1.2em;
text-transform: none;
letter-spacing: 6px;
font-weight: 300;
color: #fff;
}
.bottom_border{
padding-bottom: 15px;
border-bottom: 0.5px solid #FFFFFF;
border-bottom-width: 1px;
border-bottom-style: solid;
}
Also apologies I tried adding the URL of the first background image but it didn't work. Heres the imgur url if you want to download it.
Don't know if this is what you are looking for, but try to add z-index to the centered class:
.centered{
position: fixed;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
/* add z-index */
z-index : -1;
}