How to set a responsive background image in ionic?

Question

Im trying this

.pane { 
        background: url('../img/fondoapp.png'); 
        background-size: 100% 100% !important;
        background-position: center center;
        background-repeat: no-repeat;
        background-attachment: fixed;
    }

But using .pane or .scrollcontent repeats the background image in my others tabs, also when native keyboard comes up it resizes the image.

Solution

First of all trick to fit background image to whole element is background-size: cover, Now you can make class like this

.view-with-bg{
  .view-content {
    background-image: url('../img/fondoapp.png');
    background-size: cover;
  }
}

Now add view-with-bg to <ion-view> of that tab and add view-content to that specific element (which in your case is <ion-content>) where you want background image. OR

.view-with-bg{
  .pane {
    background-image: url('../img/fondoapp.png') !important;
    background-size: cover !important;
  }
}

And just add view-with-bg to <ion-view> of that tab. This will be only applied to only that particular page. Plus here is nice post about background image tricks.