I have set the background image of a box to be fixed so that a transparent box will scroll over it revealing the fixed image as you scroll down the page. This works great on a computer and even in Safari’s Responsive Design Mode works great on the smallest screen, however on an actual phone (iPhone 12 I’m testing on) the transparent box doesn’t scroll over the background image, it’s like the transparent box just is filled with a section of the image. Happy to upload the document if needed, but here is a link: https://christinawindhorse.com
and here are the setting I have on the box with the background image:
Unfortunately, it seems that Fixed background attachment has limited support in mobile browsers. It seems to have been disabled in iOS for performance reasons.
Ah… bummer, thanks for the info!
I used the supersize action for a background in Freeway with success to have a no scroll on iOS, probably with a little tweaking, and it is still going strong on that website: Jon Halvorsen Portfolios
I’ve been looking for a solution for a website I’m working on now, but most seem rather complicated. Surely, if a Freeway Action did the job in the old days there could be an easy solution now with Xway?
You can choose Fixed from the Attachment popup in the Background section of the Page (or Box) Inspector.
Adapting one of those suggestions for Xway:
- Insert a box at the top of the page
- Give it a Fixed position, and set the Z-Index to be -1
- Give it a width of 100vw and a height of 100vh (so it covers the viewport)
- Set a background image
Four easy steps. Then tested on iOS. …and it seems to work well. The only thing I encountered was it didn’t work using the master page. But no problem as I don’t have many pages to go through. Wonderfully simple.
For what it’s worth, I didn’t have any problems doing this with a master page.