Paralax scroll for image works on desktop but not mobile

I created a paralax scroll, with this piece of CSS: 

section[data-section-id="section-id-here"]
.section-background {
    background: url('custom-file-image-here');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
}

works like a charm on a desktop. however, there is no parallax on mobile. the photo on mobile looks awful as it's very zoomed in. does anyone know how to fix this? 

Hi,

background-attachment: fixed won't work on iOS. iOS doesn't support this attribute

You can consider disable effect on mobile

37 minutes ago, tuanphan said:

Hi,

background-attachment: fixed won't work on iOS. iOS doesn't support this attribute

You can consider disable effect on mobile

okay, do you know how I add that to the CSS? and if I disable parallax for mobile, I need to ensure the image appears full size on mobile? Thanks

22 hours ago, lilpruks said:

okay, do you know how I add that to the CSS? and if I disable parallax for mobile, I need to ensure the image appears full size on mobile? Thanks

Can you share link to page where you use this effect? We can check/give code easier

On 8/12/2023 at 5:26 AM, tuanphan said:

Can you share link to page where you use this effect? We can check/give code easier

Pineslandscaping.ca

password: Pineslandscaping

the effect is on multiple pages throughout the site