0

I have a fixed, cover, no repeat background on my site using the following CSS Class, however this issue seems to happen on all sites using this method:

.bg-image {
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}

The problem here, however, is that on the mobile version of chrome, the URL bar at the top disappears as you scroll down the site. This means the viewport size changes, causing the background to jump, here is an example from the css-tricks site (Use a mobile device):

https://css-tricks.com/examples/FullPageBackgroundImage/progressive.php

How can I stop the background image from jumping and resizing as the URL bar appears and disappears? I have seen many, many supposed solutions- but all are from 5-6 years ago and no longer work, see below:

Prevent fixed-position background-image: cover from resizing in mobile browsers upon address bar hide

Background image jumps when address bar hides iOS/Android/Mobile Chrome

S.Stevens
  • 378
  • 1
  • 5
  • 18
  • you can set your html to 100vh in your css and your image will fill the whole background. The issue is that you have to choose between one of two things. 1) collapsing header / footer UI elements built into browsers like Safari, and 2) overflow and scrolling. There is no option that gives you both. iOS will allow you to have a fixed region like a div 100% width 100% height position absolute, and have it scroll, overflow auto. that becomes the body. if you do that your header will never collapse. Otherwise you need -webkit-overflow-scrolling: touch; + vh fix for mobile (JS etc) – Zuriel Dec 12 '20 at 19:58
  • Yeah, in the end I gave up after I realised it was to do with the header hiding on mobile when you scroll down. 100vh would still mean it shifts surely, because the definition of 100vh changes dependant on if the header is or isn't visible? – S.Stevens Dec 18 '20 at 12:56

0 Answers0