Currently, I am implementing a background perspective change with the use of mousemove.
However, an issue arises with the right margin of the image after moving it. Everything looks fine initially.
Any suggestions on how to prevent this problem?
https://i.sstatic.net/539Ny.jpg
HTML-
<div id="bg">
<div class="container1" >
<div class="row1">
<div class="col-md-12" data-aos="fade-left" data-aos-duration="2600" data-aos-once="true">
<h1 class="title">Keeping track of your health. I`m a:</h1>
</div>
<div class="col-md-12" align="center" data-aos="fade-right" data-aos-duration="2600" data-aos-once="true" >
<a class="btn-link" href="/doctor-register"><button class="btn" type="button" type="submit" value="doctor">DOCTOR</button></a>
<a class="btn-link" href="/patient-register"> <button class="btn" type="button" type="submit" value="patient">PATIENT</button></a>
<a class="btn-link" href="/donor-register"><button class="btn" type="button" type="submit" value="donor">DONOR</button></a>
</div>
</div>
</div> <!-- /container -->
</div>
CSS-
#bg {
height: 100vh;
background-image: url('../../../images/3.png'); /* Background Image Link */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
Javascript-
$(document).ready(function() {
$("#bg").mousemove(function(e){
var x = -(e.pageX + this.offsetLeft) / 65;
var y = -(e.pageY + this.offsetTop) / 65;
$('#bg').css("background-position", x + "px " + y + "px");
});
});