Keep background fixed while navigating throw sub-states

I’m using a tabs template for an Ionic project and have setting the background image for the whole application. Just like this post Ionic full screen background image

But when the transition is from some Home view to a sub view the animation also affects the background. My goal is to always keep the background fixed and animate only the content on transitions.

Does anyone know how to always keep the background image fixed while using the Ionic Tabs project?

I’m having the same issue. What I did is setting the background into ion-nav-view and setting ion-view background to transparent. However, there is a very strange issue when the content disappears from the initial state when navigating to another one.

Pacifica.app has a very similar navigation like the one we’re trying to do, so I’m sure this could be solved but I don’t know how.

Here you have a Codepen demonstrating the issue. I can achieve a fixed background between views, but the content of the previous view overlaps when navigating to the next one. It would be awesome if @mhartington or somebody else from the Ionic team could share some light about how we can solve this issue :smile:

At the moment, I don’t think its going to be possible.
Like you’ve described @alvaromb, the content gets overlapped because of how our animations work.

Pacifica seems to be using an older version of Ionic where the animations weren’t as advanced.

1 Like