'Avoid resizing CSS background image with mobile keyboard

I've configured a full screen background image with CSS like this:

html {
    background: url(image url) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    height: 100%;
    overflow: hidden;
}

When I first open the site in a mobile browser it looks great. However, if I select a form input and the mobile keyboard pops open then the background image resizes to match the height of the view that's above the keyboard.

Is there any way to keep the height of the background image static when the mobile keyboard opens? CSS only solutions are preferred.

htmlcssformsmobile


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions