Background Image resized on keyboard show



I have exact same issue as this one: Background Image resized when keyboard is shown only with ionic 2. Anyone have any idea how could I solve this? I run out of ideas :slight_smile:



the views and ion-content containers get smaller if the keyboard is open.

so you have to attach the background image to a fixed container. Maybe directly the body?


Thanks but that doesn’t work. If I set background image on body it is not visible because ion-content have background, if I set transparent background on ion-content then I can see screens shown before current screen.


ah, right. i forgot this :confounded:


I noticed that image is not resizing if application is run in full screen, but I want my status bar to be visible :slight_smile:


Anyone else any other ideas?


@sava999 Did you find a solution?


No I didn’t find any solution for this.


Follow this one


How does one set it directly to the body?

Thanks in advance.


This is how I tackled the problem, hope it’s useful to you:


Just tried this, it is not working for me.


background: white;
display: block;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 1;
opacity: 1;
background-size: 100% 100%;
background-position: center !important;
background: url("…/assets/imgs/registration_bg_v1.png");
background-repeat: no-repeat;
-ms-background-size: cover;
-o-background-size: cover;
-moz-background-size: cover;
-webkit-background-size: cover; // background-position: 53% 89%;
-ms-background-size: cover;
// background-size: cover;
background-position-y: 90%;

set this to ion-content directly no need to view bcz in device it render as view,
this will work i have tested with android and ios too…!!!


Same happening on V4 any solutions?


Looks like Keyboard plugin resolves the issue

It works fine on IOS, where I had a small issue on Android (On Android it push the header behind the statusbar when the keyboard is shown), it got resolved by making statusbar.overlaysWebView(true) only for IOS