background-image fixed on iOS

Navigation
2

I created a background with a still image in the body of the site. It was ok on the desktop and Android, but in iOS the image does not stay fixed. The image scrolls down as I scroll down.

    
asked by anonymous 31.01.2018 / 14:17

2 answers

0

Unfortunately iOS does not support background-attachment: fixed; . I could not find official documentation, but there is a lot of discussion on the subject. In the midst of all the discussions, the bottom line is that fixed background does not work on iOS.

However there are a few gambiarras that resolve may alleviate the problem, but the effect is not even close to normal. One of them is to use JavaScript to make the background follow the scroll of the screen. It would: 

document.addEventListener("scroll", function(){
   document.querySelector("body").style.backgroundPosition = '0 '+window.pageYOffset+'px';
});
body{
   background: url(https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg);
   background-repeat: no-repeat;
   color: #fff;
   font-size: 24px;
}
Role para baixo
<br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br />
fim!
    
31.01.2018 / 15:09
0

I'd like to see your code to know what would be the best option for your case. But as we do not have other details as well as the @dvd I will post a solution only with CSS without JavaScript and crossbrowser. Despite the notorious problem of background-attachment:fixed; on iPhone, I did not find official documentation either. 

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}
    
body {
    background-image: url(http://placecage.com/800/800);
    background-position: center;
    background-size: 100%;
}
#wrapper {
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    color: #fff;
}
<div id="wrapper">
        <h1>início</h1>
        <br>
        <br>
        <br>
        <br>

        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <h1>Fim</h1>
    </div>
    
31.01.2018 / 15:33
Determine the number of autocomplete items a textfield can allow Activating cgi bin web module c ++