Ionic background-image not showing on device

Question

I've set a custom class .auth-pane on a page in my Ionic app in order to style it with a custom background.

The CSS for the background is...

.auth-pane {
  background-image: url("../img/auth-background.jpeg");
  background-position: center;
  background-repeat: no-repeat;
}

applied to <ion-view view-title="Auth" class="auth-pane">

Everything works just fine in Chrome (using ionic serve), but when I build and run on device, all I see is a plain white background.

I've tried adjusting the path for the background image to img/auth-background.jpeg and /img/auth-background.jpeg, neither of which have made any difference (though the absolute path does also work in Chrome).

No errors (404, etc.) are being thrown relevant to the image file, so it seems the file is being found.

Answer 1

Give this a go worked great for me.

.scroll-content{
    background: url("../media/images/background.jpg") no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;

}

Answer 2

Its not the size of the image that prevents it from displaying in ionic2.This is what you should do when the local image is not displaying:

remove the trailing ../ before your image folder or image name.The App already knows that all image are stored by default in the www folder.So you will have to use a format like this for all your images to display: Fir icons: and for background image '

Answer 3

Give this a try, it has worked great for my Ionic projects:

.auth-pane {
    background: url(../img/auth-background.jpeg) no-repeat center center fixed; 
    -webkit-background-size: 100%;
    -moz-background-size: 100%;
    background-size: 100%;
}

Answer 4

I was working with Ionic2 and getting the same error, but my other images were showing up. I had to reduce the size of the image to get it to work. I'm not sure if this is a know limitation.