Why is my background-image resizing on scroll on mobile?

Question

For some reason, my div with a background-image gets zoomed in when scrolling on the page when on mobile. I googled it and it seems others had this problem too, but I didn't find a satisfying solution, if any. But, I found this: https://www.w3schools.com/howto/tryhow_css_parallax_demo.htm (from here: https://www.w3schools.com/howto/howto_css_parallax.asp), and it works fine. So what is w3schools doing differently? I checked their code, but I didn't find anything that made a difference.

(FYI, I still have the problem even without the parallax effect from "background-attachment: fixed;" and even without a vh unit for the height).

Here's my code:

HTML:

<div class="landingContainer">                
    <h1>Welcome to Restaurant</h1>
    <h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</h2>
</div>

CSS:

.landingContainer {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  
  background-image: linear-gradient(rgba(0,0,0,0.4),rgba(0,0,0,0.4)),
                    url('/src/components/Home/homeImages/pexels-emre-can-acer-2079438.jpg');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  
  width: 100%;
  min-height: var(--vh100);
  padding: 1rem;
  color: white;
  text-align: center; 
  overflow-wrap: anywhere; 
}
.landingContainer h1 {
  font-size: clamp(2.2rem, 2.0058rem + 1.2427vw, 3rem);
    /* https://css-tricks.com/linearly-scale-font-size-with-css-clamp-based-on-the-viewport/#for-those-who-dont-mind-that-edge-case */
  font-weight: 600;
  margin: 1em 0 .5em;
  color: white;
}
.landingContainer h2 {
  font-size: clamp(1rem, 0.9892rem + 0.0693vw, 1.1rem);
  font-weight: 300;
  width: 85%;
  max-width: 45ch;
  line-height: 1.6;
}

Thank you!

Update: see here for a video: https://imgur.com/a/ZFWgdqr

https://css-tricks.com/the-trick-to-viewport-units-on-mobile/ — , Jul 08 '21 at 17:42
I think I understand the issue. When the address bar (dis)appears the display size changes. When the display size changes the background cover recalculates the zoom. There might not be an easy solution, because you probably want this to work as desired on different size devices. Probably a script to fix the background size on load. Or using device width as metric. — Gergo, Jul 09 '21 at 05:36

score 3 · Answer 1 · answered Jan 05 '22 at 16:46

3

The problem seemed to have been the address bar on top auto-hiding. This solved the problem: https://stackoverflow.com/a/61683565/11528872, though I changed "top: 0.5px;" to 0.1px.

answered Jan 05 '22 at 16:46

score 0 · Answer 2 · answered Jul 08 '21 at 16:27

100vh changes when the browser's UI "retracts" when you scroll on mobile. If this causes your .landingContainer to change dimensions then, and since your background is sized based on the container with background-size: cover;, then you will see it being resized.

w3schools seems to be using min-height: 100%; to set a height instead. Depending on what you want to do, this could work for you as well.

A while back, I made myself a little tool to see which values change and which stay the same based on ≠ things (scroll, resize, ...). Maybe it could be useful for you as well: https://sheraff.github.io/height/index.html

As I said: "(FYI, I still have the problem even without the parallax effect from "background-attachment: fixed;" and even without a vh unit for the height)." — , Jul 08 '21 at 17:43

isaaccuraErnesto · Answer 3 · 2022-01-05T07:32:56.630

I was having this same problem and solved it thanks to this article:

https://www.w3schools.com/howto/howto_css_parallax.asp

Towards the end of the page they have a code editor with the following code:

/* Turn off parallax scrolling for all tablets and phones. Increase/decrease the pixels if needed */
@media only screen and (max-device-width: 1366px) {
  .parallax {
    background-attachment: scroll;
  }
}

On top of that, I changed the height of my affected components (I'm using React) to 100% instead of 100vh (though I know you said you've already done this). I believe background-attachment: scroll should do the trick for you. Just make sure that no other CSS selectors or media queries are overriding this fix. It didn't work for me at first because I had backgroundAttachment: 'fixed' as inline styling. I moved all the styling of those components to my index.css and voila, it worked! Sad to lose the parallax effect on mobiles though.

If none of the above works, check out this great article that addresses the problem by 'hacking' it:

https://css-tricks.com/the-fixed-background-attachment-hack/

score 0 · Answer 4 · answered Jan 05 '22 at 21:26

0

Yes, the problem is the URL bar auto-hiding since with each 'shown'/'hidden' toggle the element's height seems to change thus triggering a background readjustment (I believe because of background-size: cover).

The problem I have with that solution is that I don't want the URL bar to always show. I don't want to lose those pixels. If you're happy having it always showing, then it's a great solution.

answered Jan 05 '22 at 21:26

isaaccuraErnesto

1
2

edit your longer (and older) answer to provide additional information please :) – kevinnls Jan 06 '22 at 07:08
Should I merge them together? This one was actually a reply to AProgrammerZ's comment on my first answer. I'm afraid if I were to combine them, the logical flow would be lost. Thoughts? – isaaccuraErnesto Jan 07 '22 at 08:07
either way, it doesn't seem like they saw your answer as a comment. you could always use `***` to create a `
` and add some additional info that doesn't immediately correlate with the previous section :) nonetheless, it has become stale for this thread. keep it in mind for future answers. looking forward to more contributions from you! ^_^ – kevinnls Jan 07 '22 at 14:41
Noted! Thank you :) – isaaccuraErnesto Jan 07 '22 at 22:50

Why is my background-image resizing on scroll on mobile?

4 Answers4