Background Image resized on keyboard show


#1

Hi,

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:

Thanks


#2

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?


#3

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.


#4

ah, right. i forgot this :confounded:


#5

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:


#6

Anyone else any other ideas?


#7

@sava999 Did you find a solution?


#8

No I didn’t find any solution for this.


#9

Follow this one


#10

How does one set it directly to the body?

Thanks in advance.


#11

This is how I tackled the problem, hope it’s useful to you: https://stackoverflow.com/questions/39682450/ionic2-background-image-is-resized-when-keyboard-is-open/39682451#39682451


#12

Just tried this, it is not working for me.


#13

{
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…!!!