Background image and text input size minimized when keypad is on

Hi there,

background image and input text size gets Shrinks/minimized when keypad is on. I have tried all the given options (separate class for background, changing background style of scroll-content or .pane etc) but unable to fix this issue. please help.


<ion-content text-center>
    <div class="head" text-center>
    <div class="inputs">
        <ion-label fixed>User Name</ion-label>
        <ion-input type="text"></ion-input>
      <span class="space">&nbsp;</span>
        <ion-label fixed>Password</ion-label>
        <ion-input type="password"></ion-input>
      <button ion-button block (click)="doLogin()"><b>Login</b></button>
      forgot password?<br><button id="btn" outline ion-button round (click)="forgotPass()">Click Here</button>



page-login {
    .scroll-content {
        background: url(../assets/imgs/bg.jpg) no-repeat ;
        height: 100%;
        //width: 100%;
        // background: linear-gradient(60deg,#088A29 20%,#A9F5A9 60%);
        //background: linear-gradient(10deg,#A9F5A9 10%,#088A29 60%);
        -webkit-background-size: 280% cover;
        -moz-background-size: cover;
        background-size: cover;

        font-size: 2.8vh!important;
        color: rgb(1, 94, 24);
        display: block;
        font-weight: bold;
        top: 20%;
        margin-left: 50%;
        transform: translate(-50%,60%);

      position: obsolute;
      margin-top: 10%;
      transform: translate(11%,30%);
      width: 85%;
      color: rgb(1, 94, 24);
      opacity: 2;
      font-weight: bold;
        background: transparent!important;
        border: 1px solid #000!important;
            color: #000;
            font-size: 2.5vh!important;
            color: #000!important;
            font-size: 2.5vh!important;
            font-weight: bold!important;
        // .pass{
        //     border-bottom-color: transparent !important;
        //     box-shadow: none !important;
        // }
      margin-top: 15px!important;
      //display: block;
      background: #fff!important;
      border: 1px solid #088A29;
      box-shadow: 0px;
      color: #9A9595!important; 
      //align-content: right!important;
        display: block;
        margin-top: 40%!important;
        transform: translate(18%,0%);
        width: 80%;
        color: rgb(3, 46, 5)!important;
        font-weight: bold!important;
        font-size: 2vh!important;
      .foot a{
          text-decoration: none;
          color: rgb(1, 94, 24)!important;      
          background: transparent!important;
          border: 0.5px solid #088A29!important;
          color: #088A29!important; 
          text-transform: none;

Normal Background :

Background and Input text minimized