html - images - Ionic background-image not showing on device

ionic image not showing on device (5)

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.

Give this a go worked great for me.

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


I had the same problem, I tried many options including background-size, but finally I solved it strangely by adding some empty content to my container like this:

<span class="auth-pane">

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.

.auth-pane {
   background: url('../img/image_name.jpg') no-repeat top;
  background-size: 100% 200px;

increase height which is suitable for you