1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

XF 1.5 Background Image Moves on Mobile

Discussion in 'Styling and Customization Questions' started by BrianC, May 17, 2016.

  1. BrianC

    BrianC 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?
  2. Arty

    Arty Well-Known Member

    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):
    #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; }
    BrianC likes this.

Share This Page