title: Make a full screen CSS background image appear "behind" a mobile keyboard
body: <p>I've set an HTML/CSS full-screen background image with:</p>
  
  <pre><code>html, body {
    background: url("background.jpg") no-repeat center center fixed;
    background-size: cover;
    overflow: hidden;
  }
  </code></pre>
  
  <p>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. </p>
  
  <p>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?</p>
  
  <p>I've tried setting the <code>document.body.style.backgroundSize</code> to the original window height after window resize events but that doesn't seem to impact the background image size at all. </p>
  
  <p>Here are screen shots of the no-keyboard and keyboard-open states:</p>
  
  <p><a href="https://i.stack.imgur.com/bLHjnl.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/bLHjnl.jpg" alt="No keyboard open"></a> <a href="https://i.stack.imgur.com/inCNrl.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/inCNrl.jpg" alt="Keyboard open"></a></p>