All geek questions in one place

Resize / fade background image when using soft keyboard in iphone / ipad (using phone screensaver)

I ran into a problem when I run the phone code for the iphone, that is, when the soft keyboard (by default) of the iphone / ipad device appears, the background image disappears or changes, which you can see in the images below. Please suggest if you have an idea to solve this problem.

enter image description here

enter image description here

Here are some codes:

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <meta name="description" content="">
 <meta name="viewport" content="width=device-width">
 <meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="viewport" content="user-scalable=0, initial-scale=1, minimum-     scale=1, width=device-width, height=device-height" />

body:

<body>
 <div id="login-back" >
    <section class="log-email">
    <a class="back-icon" href="index.html"><img  src="img/back-icon.png" alt=""></a>
    <h3>Login</h3>
    <div class="log-email-container">
     <ul class="contact_form">

                        <li class="clearfix">
                            <input type="text" name="" id="email" placeholder="E-mailadres">
                        </li>
                        <li class="clearfix">
                            <input type="password" name="" id="pwd" placeholder="wachtwoord">
                        </li>                            
                        <li class="clearfix">
                            <input type="submit" value="Inloggen" id="llogin"  style="font-size: 14px; " onclick="login();"  name="">
                        </li>
                        <li>
                           <a href="reset-pass.html" id="linkfp" style="font-size: 16px;"><u>Wachtwoord vergeten?</u></a>
                        </li>
                        <li id="test">
                        </li>
                    </ul>
    </div>
    </section>
 </div>

  </div>
</body>

CSS

 #login-back
 {
    background:url(../img/bg.jpg)no-repeat fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: 100% 100%;
    height: 100%;
  }
+4
source share
3 answers

I also run into this problem. I got the solution after a long search. in your html page add a meta tag following

<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="mobile portfolio, mobile portfolio site">
<meta name="viewport" content="width=device-width, initial-scale=1">
 <meta name="viewport" content="width=device-width, initial-scale=1"> 
</head>

Add to your title tag

0

, ios simulator 7.1

<!DOCTYPE html>
<html>
    <head>
       <meta name="viewport" content="width=device-width, initial-scale=1">
            <title>Insert title here</title>
            <link href="css/jquery.mobile-1.3.2.min.css" rel="stylesheet"
            type="text/css" />
            <script src="js/jquery-1.10.2.min.js" type="text/javascript"></script>
            <script src="js/jquery.mobile-1.3.2.min.js" type="text/javascript"></script>
            <style type="text/css">
                .bgforback {
                    background-image: url(img/sc_bg.jpg);
                    background-repeat: no-repeat;
                    background-size: 100% 100%;
                    position: fixed !important;

                }
            .cen {
                position: absolute;
                margin: 50% 20%;
                width:60%;
            }
            p{
                color:red;
                text-shadow:none;
            }
            </style>
    </head>
    <body>
        <div data-role="page" class="bgforback">
            <div class="cen">
                <p>LOGIN</p>
                <input type="text" placeholder="Email address">
                    <input type="password" placeholder="password">
                        <input type="button" value="LOGIN">
                        </div>
        </div>
    </body>
</html>

0

A little late, but I hope someone gets this answer useful. Try this CSS directive:

background-attachment:fixed;
0
source

Source: https://habr.com/ru/post/1536080/

More articles:


All Articles