CODEWITHSUNDEEP
cssionic-framework
David Leyva Siqueiros
David Leyva Siqueiros

Reputation: 356

How to set a responsive background image in ionic?

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.

Upvotes: 2

Views: 18501

Answers (1)

Mudasser Ajaz
Mudasser Ajaz

Reputation: 6257

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.

Upvotes: 6

Related Questions