background attachment: fixed not working on android/ios

Question

This is my code:

        
                      

              相关标签:
       
      

Answer 1

bacground-attachment:fixed;

 .fixed { 
    background: url(img/kid1/1.jpg) no-repeat center center;
    background-attachment:fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    }

Answer 2

background-attachment: fixed is not supported on many mobile phone browsers.

If you check here: http://caniuse.com/#feat=background-attachment, you'll see the reason why on your laptop you get a different result that the one from your phone.

So far, I've found that the best thing to do is treat the image on phones as an image without parallax.

hope it helps

Answer 3

Div cover (version 1):

HTML5:

<div class="fixed"></div>

CSS3:

.fixed { 
background: url(img/kid1/1.jpg) no-repeat center center fixed; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

OR:

Div cover (version 2):

HTML5:

<div class="fixed" style="background: url(img/kid1/1.jpg) no-repeat center center fixed;"></div>

CSS3:

.fixed {  
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

Or on "html" tag (fullscreen cover):

html { 
background: url(img/kid1/1.jpg) no-repeat center center fixed; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

Simple. :)

Answer 4

To parallax properly on mobile use perspective. Parallaxing with JS or background-attachment:fixed; doesn't work properly on mobiles.

https://developers.google.com/web/updates/2016/12/performant-parallaxing