Background Image resized when keyboard is shown

ionic-v1
1

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?

Thanks

2 Likes
2

Try to set it to .pane.
like this:

.pane{
background:url(…/img/background.jpg) no-repeat;
-webkit-background-size:cover;
}

2 Likes
3

Think it is working! :slight_smile: Thanks.

4

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?

5

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 .

6

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

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

Thanks a lot for your replay! :smile:

2 Likes
8

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

9

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

10

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

1 Like
11

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.

image

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

display

    .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;
        background-size:cover;
        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.
Annoying.
Any fix?

12

same issue did u solved it