XF 1.5 Background Image Moves on Mobile

BrianC

Active member
I set a background image in Style Properties/General/Body and set for Fixed and No Repeat. The image shows as intended and stays in place when scrolling down the page when viewed on a computer. The forum scrolls/moves over the image. The problem is when viewing the website is viewed on an IPhone the image rotates up the page with scrolling. It does not stay in place as it does on a computer and scrolls/moves with the webpage.

Can someone advise on a way to make the image stay in place on both a computer and phone?
 
Fixed background is disabled in iOS Safari because it costs a lot of resources to repaint entire page after scrolling.

Workaround is to add a pseudo element behind container with fixed position. Something like this (didn't test it):
Code:
#headerMover:before { position: fixed; top: 0; left: 0; right: 0; height: 100vh; background: url(your_background.png) 0 0 no-repeat; background-size: cover; z-index: -1; }
 
Back
Top Bottom