2

This is my first question. As the title says I'm having troubles with fixed bg image on mobile. When I scroll down a it makes a small zoom in, and when i scroll up it goes back to original size. I dont understand why. I went through all the already made questions about this topic before asking, I asked a couple of friends too, but to be honest i couldn't find the answer yet.

This is my website where im having this issue, open it in your mobile browser.

This is my Github repository where you can see all my code.

This are some of the things im using, that i found in other related posts:

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">

CSS

.bg {
     background: url(./app/assets/images/2.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    height: 100vh;
    width: 100%; 
}

Thank you all for your time!

Facundo Malgieri
  • 172
  • 1
  • 1
  • 12
  • 1
    to save people suggesting something you've already tried, could you please show us what you've tried. Also it's best practice to create a [Minimaly, Complete, and Verifiable Example](http://stackoverflow.com/help/mcve) in order to eliminate the need to both sift through your code, and to allow for easier debugging – haxxxton Feb 27 '17 at 01:06
  • Thanks for the advice, as I said im new on this, i'll edit my question right away! – Facundo Malgieri Feb 27 '17 at 01:07

3 Answers3

1

This worked for me, main thing here are

background-size: cover;

height: 100vh;

 content: '';  
 position: fixed; /* Important */
 top: 0px;
 left: 0px;
 z-index: -1; 
 height: 100vh;
 width: 100%;
 background: url('<?php echo $background_image;?>');
 opacity: 0.8;
 background-repeat: no-repeat;
 background-position: center;
 -webkit-background-size: cover;
 -moz-background-size: cover;
 -o-background-size: cover;
 background-size: cover;
Salman Riyaz
  • 808
  • 2
  • 14
  • 37
0

For whatever reason, your site seems to be fine.
Are you sure you do not have another finger on the screen or dust or liquid if viewing from your mobile. If viewing from your PC, make sure you do not have the Ctrl button clicked while trying to scroll.
Those are all simulate zooming.

Adibas03
  • 410
  • 2
  • 9
0

Nearly four years late here, but based on the description and the fact that it only happened on some viewports, it sounds like your issue is due to how the image resizes when the address bar for the mobile browser hides. See this for a more detailed explanation; it seems Safari and Chrome have a solution at this time.

Ashavan
  • 623
  • 3
  • 8