Why is the second background image not displaying after rotating my device?

Question

I have two background images to create a layered effect and to keep the file sizes small. There's a repeating star pattern in the back, and a white "cutout" on top (there are two versions of the latter: for desktop and mobile). Stripping my code down to the very basics, this is what it should look like on devices with a width greater than 740 pixels:

All of my testing on desktop results in the desired effect. But when I bring this to my mobile, a Samsung Galaxy s9, and rotate the device to landscape mode (width >740), the top background image disappears:

To add to this weirdness, something about the length of the content seems to be what breaks the background. If you remove a paragraph, the top background image will display again. I've tested single lines of text and images – it all seems to amount to the length of the page.

My code (see it in JSFiddle) is very basic and has been widely supported for a long time, so is it just a glitch on this specific device? Or is it the act or rotating causing the problem?

body {
  min-height: 100vh;
  background-color: #200047;
  background-image: url(bg_cutout.png), url(background.jpg);
  background-position: center top, left top;
  background-attachment: scroll, fixed;
  background-repeat: repeat-y, repeat;
}

@media screen and (max-width: 740px) {
  body {
    background-image: url(bg_cutout_m.png), url(background.jpg);
    background-position: left top, left top;
  }

  .desktop {
    display: none;
  }
}

I would preferably like to find a pure CSS solution, but I have spent so much time troubleshooting this, that I'd be happy with a JavaScript or jQuery fix as well. Anything that will point me in the right direction would be appreciated.

Answer 1

The issue was not in the code, but in the background image itself, which turned out to be too large for Chrome on Android. It seems images 4000 pixels in width or larger are not supported.

Even though the original file was relatively small (35 kb), the dimensions were quite large – 8050 x 768 pixels. I originally made it this large in order to ensure it would be seamless even on 8k screens. I never intended mobiles to use the large image, but it picked it up anyway in landscape mode due to the high resolution of the device.

My solve is to now have 3 versions of my cutout background image (1 for mobile, 1 for screens smaller than 4000 pixels and 1 for larger screens) and call them with media queries.

Using Chrome's feature to remote debug an Android device was very helpful to troubleshoot this issue, in case that might help someone else with problems that inexplicably only appear on Android. ;)