Question

I have a background image that covers the entire screen. It works like a charm in web. However when I click an input field in mobile browser, the background shifts (I believe so) and shows a white colour. Since my input fields are also white, I can't see them when things get messed up as such.

Attaching the screenshot of both states before clicking the input field and after clicking it as well on mobile.

CODE HERE:

<body class="details_step1-1">
   <div>
   ...........
   </div>
</body>

CSS HERE:

.details_step1-1{
    background-image: url("../images/img_foldbg.png");
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
    height:100%;
    -webkit-background-size:cover;
    -moz-background-size:cover;
    -o-background-size:cover;
}

TRIED FIXES: 1. Adding min-height to the background image, html, body as 100% together as well as separately. 2. Adding height as 100vh to the background image, html and body.

Answer 1

您可以在html标记和正文标记上应用overflow：auto，这样可以解决空格问题。

Background issues in Mobile Browser

1 个答案: