Trying to implement a scrolling effect where the content covers an image from this tutorial video. The issue I'm encountering is that the image is not a background image but an actual image tag. Here's my current code:
<section id="home" class="bgWrapper">
<img id="parallaxImg" class="bgImg" src="images/bg/bizlifter-design-bg.jpg">
<!--<div id="parallaxImg"></div>-->
<article id="signUp" class="areaMargin">
<h1>Business smart</h1>
<h3>One simple system for your business.</h3>
<div class="purple"></div>
<div id="signupRow">
<input type="text" placeholder=" <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2a444b474f6a4945475a4b445304494547">[email protected]</a>">
<a id="btn-start" class="btn btn-lg btn-primary btnWhite" href="#">Start</a>
<a id="btn-free" class="btn btn-lg btn-primary btnWhite" href="#">It's free!</a>
</div>
<p class="forwardSlash"><span class="purpleText">
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
</span></p>
<a class="btn btn-primary btn-lg googleBtn" href="#">Sign Up Using Google</a>
</article>
The image I want to cover is identified by id="parallaxImg" on line two.