2

This is my code:

<div style="width: 100vw; height: 100vh; background-image: url(img/kid1/1.jpg); background-attachment: fixed; background-size: cover"></div>
<div style="width: 100vw; height: 100vh; background-image: url(img/kid1/2.jpg); background-attachment: fixed; background-size: cover"></div>

It works fine with chrome on my LAPTOP but not with app chrome or any web browser on android/ios(smart device). The thing is I did try this code on w3c practice mod and it did work on my phone so my code is not wrong, my phone is not wrong so what is the problem here? And how can I fix this? I'm newbie so this might be a noob question but this error really pisses me off...

Hà Trần
  • 21
  • 1
  • 3
  • Check this, maybe it solves your issue: http://stackoverflow.com/questions/24154666/background-image-size-cover-not-working-on-ios/43058483#43058483 – Viktor Tabori Apr 25 '17 at 00:49

4 Answers4

6

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

magi182
  • 3,427
  • 1
  • 15
  • 23
Paulo Künzel
  • 729
  • 2
  • 7
  • 30
1

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. :)

DEHM
  • 21
  • 2
  • But I can't see the difference. Did you find anything wrong with my code? – Hà Trần Jul 22 '16 at 03:59
  • 2
    Sometimes is "background-attachment: fixed;" buggy on android/ios. You should write: ""background: url(img/kid1/1.jpg) no-repeat center center fixed;" – DEHM Jul 22 '16 at 04:02
  • With: "background: url(img/kid1/1.jpg) no-repeat center center fixed"; in html and " -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;" in css or with background-size: cover !important; ? – DEHM Jul 22 '16 at 04:27
  • Yep... That's why i'm pissed... You can check this khanhlam-nguyen.com – Hà Trần Jul 22 '16 at 04:35
  • https://css-tricks.com/perfect-full-page-background-image/ here is cool example with demo. Maybe this works for you... – DEHM Jul 22 '16 at 19:50
  • Thank you, I really appreciate you taking the time. I did find that site before and it did work ( but it leads to other bug) but find other way to get the work done is not my purpose here. I want to understand about this bug and fix it if possible. – Hà Trần Jul 22 '16 at 21:43
0

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

AGrush
  • 1,107
  • 13
  • 32
-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;
    }
Saravanan Kasi
  • 676
  • 6
  • 21
  • Please spell correctly. `bacground-attachment` in your answer is misspelt. Also, please do not post two very similar answers on the same question. Thanks. – Pang Jul 23 '16 at 01:37