IONIC2 Background image is resized when keyboard is open

Question

Using ionic-2 when a background image is set and it's size (background-size) is set to 'cover' or '100% 100%' such as:

background: url("../../img/bg.jpeg");
background-repeat: no-repeat;
background-size: cover;

When the keyboard is opened the background image is resized, how can this be avoided? (So that the background image size remains the same even though the keyboard has shrunk the content)

hi @Dinana, try to make the background position fixed and height to 100%. For me it worked. — AishApp, Sep 26 '16 at 05:41
It works if you don't need to resize the BG pic, otherwise it doesn't.. — Dinana, Sep 28 '16 at 18:04

score 3 · Answer 1 · answered Jul 16 '17 at 11:55

3

Use the correct way to embed a full screen background image:

ion-content { 
  background: url(images/bg.jpg) no-repeat center center fixed; 
  background-size: cover;
}

answered Jul 16 '17 at 11:55

olivier

2,585
6
34
61

score 0 · Answer 2 · answered Sep 25 '16 at 01:02

After a lot of time searching with no solution I decided to develop one using angular-2's ngStyle, and the solution is quite trivial actually:

In the page class, create shouldHeight member:

export class myPage {
  shouldHeight = document.body.clientHeight + 'px' ;

  constructor(private navCtrl: NavController) {
      
  }

}

Then add this to the ion-content in the said page:

<ion-content padding [style.background-size]="'100% ' + shouldHeight">

IONIC2 Background image is resized when keyboard is open

2 Answers2

Linked