Prevent Background-Image to be resized when keyboard is shown

Ionic Framework ionic-v3
1

I added a background image to my page.

CSS:

ion-content{
        background-image: url('../assets/img/pics/bg.jpg');
        -webkit-background-size:cover;
        background-size: cover;
        background-position: center center;
    }

I used background-size: cover since the image needs to be resized depending on if the device is hold horizontally or vertically and it’s not supposed to be repeated or show “white spaces” but always fill the whole space.

Everything works fine, except of one thing: When the keyboard shows up, ion-content is resized and, thus, the background image, as well. However, this is not what I want. I want the picture to keep it’s size as before.

Any idea how I could solve this? Maybe putting the picture as a background for anything else but ion-content?

1 Like