I created a college project named as Online-Insurance-Management Responsive to screen width, I tried to add the parallax effect to it... N it worked perfectly fine!! I was happy about it. But when I hosted it on xampp n tried to open the site on my mobile, it was a mess...
The code I used for parallax effect is:
.box1 {
background-image: url(./Images/Background-Image.jpg);
width: 100%;
height: 100vh;
top: 50px;
display: table;
background-attachment: fixed;
background-position: center;
background-size: cover;
}
Whenever I try to run the site on my old mobile this happens:
Don't worry about the navbar getting out of position, my other teammate is working on it
Also, I did EVERYTHING THAT I COULD DO!!! For ease, I am sure that the PROBLEM is somewhere in Internal CSS I applied on the HOME page.
I can't use javascript here because it's out of syllabus
Please help me out here... Pretty Please...
In case you need to view the full project source: https://github.com/belikeParamjot/Online-Insurance-Managment/