Ionic How to keep fixed background while browsing the views

Question

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 ?

Solution

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

See this pen:

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

Relevant CSS:

body {
    background: 
url(http://cdn.wonderfulengineering.com/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;
}

Comments

[mmarques]

Thanks for your answer faby. So, you're sugesting that i should implement a function that changes the page content instead of using the normal stateProvider of angularJs ?

[mmarques]

Thanks Andrew! Yes, it works. However it adds another problem, if you look closely the transition animations now are strange. When you navigate to "Scientific Fact" for exemple, the new content overlaps the previous content. Why this happens ?