The first method:
1. Set the background image for the outer div container
Style= "Height:100%;background:url (.. /.. /images/10.jpg); background-size:100% 100%; "
2, listen to the keyboard pop-up events, when the height of the container to adjust to adapt to the background picture
<body onresize= "Windowsizechange (); >
var oglheight = Document.queryselector ("Body"). offsetheight;
var windowsizechange = function () {//* Adjust the height of the page when the keyboard pops up, preventing the background image from being squeezed out of the blank area
var tempheight = Document.queryselector ("Body"). offsetheight;
if (tempheight = = oglheight) {
Console.info ("On-Screen Keyboard hiding");
document.getElementById (' content '). Style.height = "100%";
} else {
Console.info ("keyboard display");
document.getElementById (' content '). Style.height = "390px";
}
};
The second method:
Fixed background, using: Before
Body:before {
Content: "";
position:fixed;
Z-index:-1;
top:0;
right:0;
bottom:0;
left:0;
Background:url (.. /.. /images/10.jpg) Center 0 no-repeat;
Background-size:cover;
}
When the keyboard pops up, the webview is squeezed causing the background image to be squeezed out of space