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>
1 answers
solution1
1 2017-09-11 11:44:44
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.