0

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>
Paolo Forgia
  • 6,572
  • 8
  • 46
  • 58
DIGVJSS
  • 463
  • 1
  • 10
  • 21
  • 1
    https://stackoverflow.com/questions/20443574/fixed-background-image-with-ios7 There are limitations to background-position: fixed and background-size: cover for mobile devices. – cloned Sep 11 '17 at 11:30
  • tried using given media query with no luck... – DIGVJSS Sep 11 '17 at 12:32

1 Answers1

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.

Awsme Sandy
  • 1,398
  • 7
  • 20
  • 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? – DIGVJSS Sep 11 '17 at 11:48
  • Then you can try width an extra empty `div` in between section `
    path}}) 50% 0px repeat>
    ` and give the position fix to it.     – Awsme Sandy Sep 11 '17 at 11:53
  • Thanks for this! but this solution is not working for me – DIGVJSS Sep 11 '17 at 12:10
  • 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 – Awsme Sandy Sep 11 '17 at 12:12
  • 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?? – DIGVJSS Sep 11 '17 at 12:30
  • here i mean when you set a div position fixed and it has background image as well, so it can cover you whole section and come on the top, so to manage this you need to make z-index in negative, in such a way that its not too much in negative that not visible – Awsme Sandy Sep 11 '17 at 12:32
  • thanks.. did that with z-index 0, it work for desktop but not mobile device – DIGVJSS Sep 11 '17 at 12:34
  • try to use chrome and its mobile simulator to check why its not working properly, because without the code even i can not guess where the problem is – Awsme Sandy Sep 11 '17 at 12:36