Background Image resized when keyboard is shown


Hi guys,

I am trying to set a background image to a nav-view.

and my CSS.
#myView {
background-image: url(’…/img/login-blur.jpg’);
background-size: cover;
background-attachment: fixed;
position: fixed;

All works well in browser, but when I run it in android, when the keyboard is show, the background resizes to fit the reduced screen.

Any workaround? Is there a better way to set background image to a view?


Background Image resized on keyboard show

Try to set it to .pane.
like this:

background:url(…/img/background.jpg) no-repeat;


Think it is working! :slight_smile: Thanks.


Hi @ZhangChuang, i’ve the same problem… but the .pane doesn’t work…
I use inline style tag, with your code.
The background is correctly shown, but if i open the keyboard the image will resize.
Any suggestion?


Hi Isma:

It is a ‘browser behavior’ as when the keyboard pops out ,the background will be adjusted . Let your app run at full- screen state , the problem would be solved .


Thanks, but my application was already in full-screen state. I solved in this way:

     background: url('../img/background_login.jpg') no-repeat;
     -webkit-background-size: 280% auto;}

Thanks a lot for your replay! :smile:


Thanks man, I was using .pane aswell and it wasn’t working. Your solution worked fine for me.


Thanks. This was also the answer for me, except I used the background on .scroll-content


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


Any idea on this? I tried ion-view no luck.
Isma suggestion my background didn’t show up.

We have multiple apps so each app could have a different background. We split out the image vs displaying it.


.gray-background {
        background-image: url('../assets/imgs/login_background.png');


    .login-background {
        transition: background 0.5s linear;
        -webkit-transition: background 0.5s linear;
        -moz-transition: background 0.5s linear;
        -ms-transition: background 0.5s linear;
        -o-transition: background 0.5s linear;

        background-repeat: no-repeat;
        background-position: center;
        background-attachment: fixed;
        width: 100%;
        height: 100%;
        overflow: hidden;

On the android phone when i click in the text box and the keyboard comes up the image shifts.
Any fix?