Archived topic
Parallax effect mobile
3 replies · Started by Pol on April 1, 2023
Hi all,
I'm trying to make a Parallax effect but it does'nt work in mobile.
I tried with html+css and with GPBlocks.
Any suggestions, please?
Thank you,
Best regards,
Hi there
are you using the background-attachment fixed property?
If so it won't work on mobile, as its extremely processor intensive so most mobile devices disable that .
Hi David,
Thanks for your quick response.
Yes, this is the code:
.container-parallax-img{
height:500px;
width:100%;
background-attachment:fixed;
background-repeat:no-repeat;
background-size:cover;
background-position:center;
background-image: url("X.jpg");
display:flex;
align-items:center;
justify-content:center;
flex-direction:column;
-webkit-backface-visibility:hidden;
}
I see perfectly in my laptop, but it does'nt work on mobile device. Also I did it throught the GPBlocks and the result is the same: It works for laptop but not for mobile devices. I don't know what can I do.
This: background-attachment:fixed; which fixes the background image will not work on a mobile device.
Fixing a background image requires a lot of CPU/GPU Processing which requires a lot of battery power.
So mobile manufactures block the fixed background - simply put it will not work on mobile