Fix for background image shifting and revealing white space when mobile URL/menu collapses

shifting-moble-background-image-fix.css

body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-image: url(../images/background-dark.jpg);
  background-color: #171a21;
  background-size: cover;
  z-index: -1;
}

updated.css

/* 
Dynamic will adjust the height based on whether mobile url/menu section is collapsed or not, but can result in janky layout shift
Large sets height assuming the menu is collapsed, and can result in content being taller than intended
Small assumes the menu is expanded and can result in content being shorter than intended
The best option depends on your use case
*/

div {
  /* Dynamic Viewport Height */
  min-height: 100dvh;
  /* Large Viewport Height */
  min-height: 100lvh;
  /* Small Viewport Height */
  min-height: 100svh;
}

CSS for background image that does not jump and cause white space when URL on android disappears.

This works because 100vh will include render the background as if the URL bar is not present, so when it does disappear the bottom part of the background image pans up to fill the space of the screen.

Worth noting that using updated.css could be more appropriate depending on your situation, but style.css may have better browser compatibility compared to dvh/lvh/svh