While browsing on mobile, I noticed that my div with a background-image gets zoomed in when scrolling down the page. I did some research and realized that others have experienced this issue as well, but there doesn't seem to be a definitive solution. However, I stumbled upon this interesting link: https://www.w3schools.com/howto/tryhow_css_parallax_demo.htm (source: https://www.w3schools.com/howto/howto_css_parallax.asp), and it seems to work perfectly. So what is w3schools doing differently? I examined their code, but couldn't pinpoint any significant differences.
(Just for your information, I still encounter the problem even without the parallax effect from "background-attachment: fixed;" and even if I don't use a vh unit for the height).
Here's a snippet of my code:
HTML:
<div class="landingContainer">
<h1>Welcome to Restaurant</h1>
<h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</h2>
</div>
CSS:
.landingContainer {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-image: linear-gradient(rgba(0,0,0,0.4),rgba(0,0,0,0.4)),
url('/src/components/Home/homeImages/pexels-emre-can-acer-2079438.jpg');
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
width: 100%;
min-height: var(--vh100);
padding: 1rem;
color: white;
text-align: center;
overflow-wrap: anywhere;
}
.landingContainer h1 {
font-size: clamp(2.2rem, 2.0058rem + 1.2427vw, 3rem);
font-weight: 600;
margin: 1em 0 .5em;
color: white;
}
.landingContainer h2 {
font-size: clamp(1rem, 0.9892rem + 0.0693vw, 1.1rem);
font-weight: 300;
width: 85%;
max-width: 45ch;
line-height: 1.6;
}
Thank you!
Update: To better illustrate the issue, please refer to this video: