CODEWITHSUNDEEP
htmlcssbackground-imagecss-position
Facundo Malgieri
Facundo Malgieri

Reputation: 192

Fixed background image zooms in when scrolling on mobile

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!

Upvotes: 2

Views: 2865

Answers (3)

Salman Riyaz
Salman Riyaz

Reputation: 818

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;

Upvotes: 1

Ashavan
Ashavan

Reputation: 967

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.

Upvotes: 0

Adibas03
Adibas03

Reputation: 430

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.

Upvotes: 0

Related Questions