Site logo

Archived topic

Parallax effect mobile

3 replies · Started by Pol on April 1, 2023

Viewing posts 1–4 of 4

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

This archived topic is closed to new replies.