Fix background image of Ion Content

Ionic Framework Ionic Angular
1

I have a login page that look like this:

image
image356×739 26.5 KB

When my keyboard is visible, the image move on top of it:

image
image345×723 37.3 KB

Here is my code:

login.page.html.

<ion-content class="ion-padding">
</ion -content>

login.page.scss

ion-content{
  --background: #EFF6FD url('../../../assets/images/login/background.png') no-repeat 100% 100%;
}

and a the image in the background in only small illlustration
image

My goal is to make it stay bottom right of the screen even the keyboard is visible. Thank you in advance!