I have used the search function thoroughly and have not found any answers relevant enough to fix my problem.
On my new website, I am implementing a single fixed background image (roughly 250x250px), set to follow the user as they scroll down the page. From other posts and my own experimentation, the CSS property "background-attachment:fixed" does not work with iPad / iPhone browsers.
One user suggested a workaround of creating a "background-wrap" div that looks like this:
#background-wrap {
z-index: -1;
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-size: 100%;
background-image: url('xx.jpg');
background-attachment: fixed;
}
Which works, to an extent. The problem with this solution (for me) is that when a user pinches and zooms on a mobile device, the background image scales differently than the foreground content, creating a sloppy, overlapping result.
Please forgive me if the answer is in plain sight. I've researched this for hours (on this site and a few others) with no avail. Many thanks in advance.
