I'm using a tabs template for an Ionic project and have set the a background image. However, when the transition throw states occurs, the background is also affected by the animation. I want that the background always stay fixed on entire application ( on transition throw states and sub-states).

This project exemplifies the problem:

link:

I also tried to assign the background property to the body but it doesn't work.

So, does anybody know how to always keep the background image fixed and only animate the content ?

I'm using a tabs template for an Ionic project and have set the a background image. However, when the transition throw states occurs, the background is also affected by the animation. I want that the background always stay fixed on entire application ( on transition throw states and sub-states).

This project exemplifies the problem:

link: http://codepen.io/anon/pen/ogYymB

I also tried to assign the background property to the body but it doesn't work.

So, does anybody know how to always keep the background image fixed and only animate the content ?

• javascript
• html
• css
• angularjs
• ionic-framework

3 Answers 3

So, there are some new plications because of some new features in beta 14, but you can still acplish what you want using only CSS.

See this pen:

http://codepen.io/andrewmcgivery/pen/azBjdB

Relevant CSS:

body {
    background: 
url(http://cdn.wonderfulengineering./wp-content/uploads/2014/07/background-wallpapers-32.jpg) ;
    background-attachment:fixed;
    background-position: center;
}

body .view-container.tab-content {
  background-color: transparent;
}

body .pane, .menu, .view, .list, .item       {
    background: transparent;
}

I think that you can't achieve what you are trying to do because it's a javascript framework implementation. When you change url (e.g. "/sign-in") the framework preoload the html of that page and then replace all the html document with the new one using a transition. In this html is included the background also. I think that for your purpose you should implement your own function that (for example) replaces only the div container html with a transition. In this way the background should remain fixed.

I had a similar problem and the only thing I did was change the scss style to include the following class:

.transparent      {
    background: transparent;
}

Which I added to the ion-view.