background-image Fixed on iOS

Asked

Viewed 608 times

2

I created a background with fixed image on the body of the site. Was ok on desktop and Android, but iOS the image is not fixed. The image scrolls down as I scroll down.

html5

  • Rodrigo put the HTML/CSS code you have please.

  • First, it had only done one line and worked on everything but iOS: body { background: url(img/bg.png) repeat-x Fixed; } Then I included a media query, and it still didn’t work: @media (max-width: 600px) { body { background: url(img/bg-mobile.png) Fixed no-repeat; background-color: #9A7350; } }

  • Rodrigo as I told you, if possible put your entire HTML code with <head> inclusive and the whole CSS. Only with this information can’t give you an accurate answer. Edit your question with the codes ok.

2 answers

0


Unfortunately iOS does not support background-attachment: fixed;. I have not been able to find official documentation, but there is much discussion on the subject. Amid all the discussions, the right is that fixed fund does not work on iOS.

However there are some gambiarras that resolve can mitigate the problem, but the effect is not nearly the same as normal. One of them is to use Javascript to do the background accompany the scroll of the screen. It would be:

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!

  • Cool, worked on iOS, but now "bugged" on Android and desktop. :(

  • Now it was! Instead of no-repeat, I put repeat-x; and, in media query, I put background: url(img/bg-mobile.png) no-repeat; background-color: #9A7350;

  • @Rodrigoitaborahy On the desktop works normal, just run the snippet above.

0

I’d like to see your code to see what would be the best option for your case. But since we don’t have too many details as @dvd I will post a solution only with CSS without Javascript and crossbrowser. Despite the notorious problem of background-attachment:fixed; on iPhone also found no official documentation.

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>

  • hugocsl, I’ve already got it with the DVD tip. I’m sorry, anyway.

  • If you used the @dvd response you should accept his response and not my rss. Qq good luck with the project

  • It’s just that I tested them both and didn’t know I could only score one (I’m new here). Thank you!

Browser other questions tagged html5

You are not signed in. Login or sign up in order to post.