Ionic How To Keep Fixed Background While Browsing The Views

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 animati

Solution 1:

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;
}

Solution 2:

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.

Solution 3:

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.