Page background image cannot be fixed placed; initial solution

[vmans]

background-attachment: fixed doesn't work properly on most mobile browsers, especially iOS Safari and Chrome for Android. This CSS property, which normally keeps a background image in place during scrolling, either doesn't function or behaves erratically on mobile devices.

Initial fix:

In BackgroundImageUtility.php, line 94, add the ::after pseudo element, like this:

$css = $this->generateCss('page-'.$uid.':after', $file, $image, $flexconf, true, $bgMediaQueries);
Now in the scss, you can add:

[id^="page-"]::after {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;
  background-position: center center no-repeat;
  background-repeat: no-repeat;
  background-size: cover;
  pointer-events: none; /* Avoid affecting interactions */
}

This works for me, but perhaps it should be configurable, and perhaps it conflicts with other styles and settings, and perhaps the css is not optimal. Anyway, it might be an improvement idea for one of the next releases. For several reasons this is the preferred solution because it works on all devices, it seems, and it is the easiest approach in the case of this extension.

If you need ::before and ::after for other purposes, an alternative solution is the fixed div: add <div class="bg"></div> before <div id="page-wrapper">...</div>. In that case there is a bit more work to in the utility classes do to get different images in different pages.

Thanks!