IONIC4 Background image is resized when keyboard is open

Issue

I'm trying to set a background image to my login page, some basic stuff. But when one of the input is pressed and the keyboard is shown the image gets resized (to a small size)

My background image is sitting in a div tag, I tried putting the image in ion-content tag, tho it solves the keyboard issue but then the image gets zoomed in way too much. I tried using the ion-view tag but then I get the following error

.... error: Template parse errors: 'ion-view' is not a known element:

Here's my html code (tho it's some basic stuff)

<div class="bg">
<form #form="ngForm" (ngSubmit)="login(form)">

</form>

<ion-label ... ></ion-label> 
</div>

Here's my bg class:

.bg{
padding-bottom: 0 !important;
background-image: url('../../assets/lock.png') !important;
height: 100% !important;
width: 100% !important;
background-repeat: no-repeat;
background-image: cover !important;
background-size: cover !important;
background-position: center; 
background-attachment: fixed;}

Solution

Worked with changing some attributes in my bg class:

.bg{
    padding-bottom: 0 !important;
    background-image: url('../../assets/lock.png') !important;
    height: 100% auto !important;
    background-repeat: no-repeat;
    background-image: cover !important;
    background-size: cover !important;
    background-position: center;
    position: fixed;
}

Answered By - Ahmad Hussian