Why Parallax effect doesn't work on mobile devices?

Question

I am working with Laravel 5.4 application having parallax effect for the main background. It works perfectly fine on desktop, and also works perfect on varied screen size through developer tool, but when the same page is accessed via mobile device, the parallax effect doesn't show up. I have added the block of code responsible for the needed effect.

#promo {
    min-height: 25em;
    width: 100%;
    position: relative;
    z-index: 0;
}
<body>
<section id="promo" style="background: url({{$mainImg->path}}) 50% 0px repeat fixed; background-size:cover;">
</section>
</body>

stackoverflow.com/questions/20443574/… There are limitations to background-position: fixed and background-size: cover for mobile devices. — cloned
– cloned, Commented Sep 11, 2017 at 11:30

Awsme Sandy · Accepted Answer · 2017-09-11 11:44:44Z

1

The background position fixed doesnt work properly on mobile devices so to fix this, you need to do a simple trick, rather then giving the section background image and make it fix, try to make section:before and set it to position:fixed; and give the backgroung image to it.

#promo:before{
position:fixed;
width:100%;
height:100%;
left:0;
top:0;
background:url('image.jpg');
}

play with z-index and here you go. try and let me know.

answered Sep 11, 2017 at 11:44

Awsme Sandy

1,3989 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

DIGVJSS Over a year ago

Thanks for your response Sandy! I am generating dynamic path of the image, how will I be able to add the dynamic path with :before css?

Awsme Sandy Over a year ago

Then you can try width an extra empty div in between section <section><div background: url({{$mainImg->path}}) 50% 0px repeat></div></section> and give the position fix to it.

DIGVJSS Over a year ago

Thanks for this! but this solution is not working for me

Awsme Sandy Over a year ago

This will surely work, if not working for you, may be you are missing something, as i told you , you need to play with z-index as well

DIGVJSS Over a year ago

If I understand this correctly, if there would have been something wrong with z-index there would have been same result for desktop view as well.! Does z-index reacts as per the screen size??

|

Collectives™ on Stack Overflow

Why Parallax effect doesn't work on mobile devices?

1 Answer 1

8 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related