ionic - resize background image when keyboard open

Question

I have a background image in ioniv-view tag class and when the keyboard open on this page, the image resizing .. the code:

.bgImage {
background: url('../img/LoginBackground.png')  no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;

}

How can I fix it?

Answer 1

@jcarballo setting image size to cover is not the best solution, in the case that background has a gradient or the image of an object. you will clearly notice the image resize even with cover.

If you still have this problem i was able to overcome it by setting the background in the following manner:

  ion-view.pane::before {
      content: '';
      position: absolute;
      height: 100%;
      width: 100%;
      background: url(...);
      background-position: top right;
      background-repeat: no-repeat;
      background-size: 280%;
}

The critical parts here are:

1. container size 100%
2. bg size 280%
3. bg position anchored to a top corner

Im not fully clear why this works, but it does, and its the colsest thing i can get to resemble a cover background without the keyboard nudging the size.

Answer 2

I've put a search bar on my home page with a full img background to check what happens when I open the keyboard. Everything works fine here, image stays on same spot and keyboard just goes over it. Here is my working example, use it to make yours work.

<ion-view view-title="The title">
    <div class="bar bar-subheader item-input-inset bar-light">
        <div class="item-input-wrapper">
            <i class="icon ion-search placeholder-icon"></i>
            <input type="search" ng-model="query" placeholder="Search">
            <a class="clear" ng-click="query = '' ">
                <span class="icon ion-close-round"></span>
            </a>
        </div>
    </div>
    <ion-content class="splash" has-bouncing="false" start-y="55" padding="true" has-tabs="true" has-header="true">
    </ion-content>
</ion-view>

So, the class splash is the one that places the full img background. Here's the css of it

.splash {
    background: url(../img/Home.png) no-repeat;
    background-position: center;
    background-size: cover;
}

Answer 3

The problem is caused by the WebView being resized when the keyboard is opened. That's why even if you center the image, it will still resize and become smaller. This behaviour is handled by the cordova-plugin-keyboard and can only be toggled on iOS, it is default for Android devices. In the documentation the following is stated:

The WebView shrinks instead of the viewport shrinking and the page scrollable. This applies to apps that position their elements relative to the bottom of the WebView. This is the default behaviour on Android, and makes a lot of sense when building apps as opposed to webpages.

You can find more information about this in the plugin documentation. The reason why it may be working for others is probably because they are either testing in the browser or on iOS, both of which behave differently.

I haven't tested any of the following suggestions, but you may try to looking at this suggestion, where they suggest to apply the background to the .pane class or to use background-size: 280% auto;, although I am not sure why that works.

There is also a similar question asked about Ionic 2 and there one of the answers is to detect the height of the device and use that for the background size, so that it ignores the WebView height. I would recommend you try something like this.

Answer 4

I solved this placing the background and background-size: cover definitions in the ion-view instead of ion-content.

Answer 5

Alternative answers I found while having the same issue but didn't really work for me due to other reasons:

Setting the app to full screen

You might not want the app to run in full screen like me so this might not be an effective solution.

Altering the AndroidManifest.xml file

If you have tried this solution where you change android:windowSoftInputMode="adjustResize"to android:windowSoftInputMode="adjustPan". You might find that it does work but by changing this (at least in my experience) it prevented the app to resize/move to the field when entering text.

A clearer example of this is - You have a form with a number of fields, click on the field and it automatically scrolls/pans the field to the top of the page and the keyboard opens, this is so you can see what you are typing and it stops working when this is changed.

Some effective fixes that I've tried:

// HTML
<div class="login-bg" ng-style="bgStyle"></div>

// Controller
$scope.bgStyle = { "min-height" : window.innerHeight + "px" };

OR

// HTML
<div class="login-bg" style="min-height:{{bgStyle}}"></div>

// Controller
$scope.bgStyle = window.innerHeight + "px";

OR

// HTML
<div class="login-bg" {{bgStyle}}></div>

// Controller
$scope.bgStyle = "style='min-height:" + window.innerHeight + "px'";

Answer 6

Cordova ionic-webview 4.1.1

global.scss:

ion-app {
    background-color: transparent !important;
    --background: none;
    background: url(/assets/img/file_name.jpg) no-repeat 0 0;
    background-size: 128% 105%;
    align-items: flex-start;
    background-position: -46px 0;

    ion-router-outlet, ion-modal {
       ion-content {
          background-color: transparent !important;
          --background: none;
       }
    }
}

app.component.ts:

window.addEventListener('native.keyboardshow', (e) => {
  const ionAppEl = <HTMLElement>(document.getElementsByTagName('ion-split-pane')[0]);
  if ( ionAppEl ) {
    ionAppEl.setAttribute('keyboard', 'true');
    const active: any = document.activeElement;
    if ( active ) {
      if ( (this.platform.is('android') || this.platform.is('ios')) && e['keyboardHeight'] ) {
        ionAppEl.setAttribute('style', 'height: calc(100% - ' + e['keyboardHeight'] + 'px);');
      }
      if ( active.scrollIntoViewIfNeeded ) {
        active.scrollIntoViewIfNeeded(true); // ensure input focus
      }
    }
  }
});

window.addEventListener('keyboardWillHide', (e) => {
  const ionAppEl = <HTMLElement>(document.getElementsByTagName('ion-split-pane')[0]);
  if ( ionAppEl && (this.platform.is('android') || this.platform.is('ios')) ) {
    ionAppEl.setAttribute('style', 'height: 100%;');
  }
});

config.xml:

<platform name="android">        
    <edit-config file="app/src/main/AndroidManifest.xml" mode="merge" target="/manifest/application/activity">
        <activity android:windowSoftInputMode="adjustPan" />
    </edit-config>

---

With cordova ionic-webview 2.2.0, I was using background-size: cover; and the background would resize when I tap on an input field. I wasn't using ionic framework but some of it's plugin for example

cordova-plugin-ionic-webview^2.2.0

cordova-plugin-ionic-keyboard^2.1.3

corodva-plugin-keyboard (this was required to move to the position of the input field)

Here's my solution:

CSS:

.content-background {
    background-size: 180% auto;
    background-image: url("img_path.jpg");
}

JS:

document.addEventListener('deviceready', function () {

    var widthHeightRatio = parseFloat((window.screen.width * window.devicePixelRatio) / (window.screen.height * window.devicePixelRatio)).toFixed(2);

    if(widthHeightRatio > 0.56){
        $('.content-background').css('background-size', '160% auto');
    }else if(widthHeightRatio < 0.56){
        $('.content-background').css('background-size', '210% auto');
    }
});

Android:

Alcatel 1x 480x960 1.5 0.5 210% (width x height | devicePixelRatio | widthHeightRatio | width)

Pixel C Tablet 1800x2560 2 0.70 150%

Nexus 7 Tablet 1200x1920 2 0.63 150%

7” Tablet 600x1024 1 0.59 160%

iOS:

iPhone SE/5S 640x1136 2 0.56 180%

iPad 2 Pro (3rd gen) 2048x2732 2 0.749 140%

iPhoneX 1125x2436 3 0.46 210%

iPhone 5S 640x1136 2 0.56 180%

iPhone 6 Plus 1242x2208 3 0.56 180%

iPhone 7 750x1334 2 0.56 180%

iPhone 8 Plus 1242x2208 3 0.56 180%

iPhone XR 828x1792 2 0.46 210%

iPad Air (3rd gen) 1668x2224 2 0.75 140%

iPad Pro (9.7inch) 1536x2048 2 0.75 140%

iPad Pro (11inch) 1668x2388 2 0.70 150%

Answer 7

By default on Android, when the keyboard opens, the entire webview is shrinked down, which means this is impossible to solve using CSS only.

Some of the other responses are correct, but none had the expected result I wanted.

So, if like me, you don't want to :

• use hard-coded value in your CSS so your background does not resize
• set android:windowSoftInputMode="adjustPan" in your AndroidManifest.xml

Here is how I did it with Ionic/Angular v5 (you may need to adjust it according to your needs) :

First, you need to install @capacitor/keyboard so you can detect when the keyboard is opened.

Then in your code,

background-cover-image.component.ts

export class BackgroundCoverImageComponent implements OnInit {

  @HostBinding('style.--min-height') public minHeight?: string;

  constructor(private readonly elementRef: ElementRef<HTMLElement>) {}

  public ngOnInit(): void {
    Keyboard.addListener('keyboardDidShow', (info) => {
      this.minHeight = `${this.elementRef.nativeElement.clientHeight + info.keyboardHeight}px`;
    });
    Keyboard.addListener('keyboardDidHide', () => {
      this.minHeight = undefined;
    });
  }

}

background-cover-image.component.scss

:host {
  display: block;
  background: url(/assets/background.jpg) no-repeat center center;
  background-size: cover;
  min-height: var(--min-height, 100%);
}

In other words, each time the keyboard has been opened, I set the component min-height to its actual height plus the height of the keyboard (so it ends up with its size before the keyboard was opened), and each time the keyboard has been closed, I restore the component min-height to 100%.

In addition to this, you may need to add other @HostBinding (e.g. @HostBinding('class')) so you can control the min-height behavior from your CSS just by toggling the class of your component, which could be useful if you don't always want the min-height to apply.