Fixed background image

I’d like a fixed background image and my pages to slide over the image as I navigate (rather than slide in a new page with a new instance of the background image). To achieve this I set the background image of the body to my desired image, and then the background-color of ion-views, and panes to be transparent.

This mostly works, but results in some undesirable glitches as the page navigates, dark vertical lines flicker on and off as the page transitions.

Does anyone know a better way to achieve this?

Thanks,

Slicc

Some Less here:

body {
    background: url(../images/background1.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;

    > .view-container {
        background-color: transparent!important;
        > .pane {
            background-color: transparent!important;
        }
    }
}
1 Like

you need to set the background image also to the ion-nav-views or set the backgrounds of the nav-views to transparent.

I had this problem in an app i published last year. There i have a gradient as background and sometimes i get black fragments or a whole black screen during transition.

i used somehing like this to fix ios transitions:

//ios animation fixes
[nav-view-transition="ios"][nav-view-direction="forward"],
[nav-view-transition="ios"][nav-view-direction="back"] {
    background-color: transparent;
}