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.

Here are screen shots of the no-keyboard and keyboard-open states:

Answer 1

It took me forever to figure this out. The key being background-attachment:fixed;

I ended up with completely different background css for mobile and desktop, but I've already sunk enough time into this.

My solution:

background: url(../images/my-img.jpg) fixed;
background-size: 150%;
background-position-x: 50%, center;

Play with bg-size to zoom in / out, then tweak position-x to move it left-right until it feels about right. I'm sure you can add position-y if you need to tweak the vertical position as well.

Answer 2

I have same problem too, my problem solved with this

BEFORE :

background: url(bg.jpg) no-repeat center center fixed;

AFTER :

background: url(bg.jpg) no-repeat center top fixed;

just change center to top