Make a full screen CSS background image appear behind a mobile keyboard

Question

I've set an HTML/CSS full-screen background image with:

html, body {
  background: url("background.jpg") no-repeat center center fixed;
  background-size: cover;
  overflow: hidden;
}

The background image looks good when viewed in a desktop browser or initially when viewed on a mobile browser. However, if I open the keyboard in the mobile browser then the image resizes to cover the space above the keyboard.

Instead of resizing, I'd like the image to appear to be "behind" the keyboard, and have the bottom portion of the image obscured. Avoiding resizing the image will make opening and closing the keyboard less jarring. Any suggestions how to achieve this?

I've tried setting the document.body.style.backgroundSize to the original window height after window resize events but that doesn't seem to impact the background image size at all.