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.

Did you happen to find a solution to this problem? Please post an answer if you have as im having the same problem — nissim_dev, May 08 '17 at 12:44

score 5 · Answer 1 · answered Apr 16 '15 at 00:33

5

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

answered Apr 16 '15 at 00:33

MattDionis

3,534
10
51
105

thanks for the suggestion! That technically does work, though I can't change the size. If it is set to anything other than 100%, the image will not display on mobile. With 100%, if the view-port is too narrow, the image gets scaled down and ends up with white letterboxing on top and bottom. – cflann Apr 16 '15 at 22:09

score 3 · Answer 2 · answered May 30 '16 at 11:48

3

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.

answered May 30 '16 at 11:48

Sako73

9,957
13
57
75

THANK YOU:) Saved me a few hours of scratching my head!! This needs to be documented in Ionic! – Sethles Oct 30 '16 at 09:54
Is this really the case?? Anyone give an exact solution to this. – Sri Krishna Feb 23 '17 at 08:22

score 1 · Answer 3 · answered May 07 '15 at 10:30

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;

}

answered May 07 '15 at 10:30

Aidan Doherty

962
2
11
29

The background is not being set in ionic-lab as well as when i run it in an android device. Is it working for you? I am using the latest version of ionic 2 and angular JS 1. – Sri Krishna Feb 23 '17 at 14:42
I have not tested this with ionic 2 althout i am pretty sure it is not possible to use ionic 2 with angular 1 http://stackoverflow.com/questions/35955053/can-we-work-with-ionic-2-and-angularjs-1 – Aidan Doherty Feb 24 '17 at 09:12
@MohamedSelim Happy this worked for you an upvote would be nice if you find this helpful ;) – Aidan Doherty Jul 11 '17 at 08:42

score 1 · Answer 4 · answered Oct 12 '16 at 14:55

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 '

score 0 · Answer 5 · answered Jan 21 '17 at 11:20

0

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

increase height which is suitable for you

answered Jan 21 '17 at 11:20

Sam

149
4
15

score 0 · Answer 6 · answered Oct 13 '17 at 11:28

.imgOFF {
  background: url(../assets/img/light/off.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  width: 50px;
  height: 50px;
  z-index: 2;
}

.imgON {
  background: url(../assets/img/light/on.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  width: 50px;
  height: 50px;
  z-index: 2;
  border-bottom: 4px solid black;
}

<ion-item>
  <ion-toggle color="royal" checked="false" [(ngModel)]="light1"></ion-toggle>
  <ion-label>
    Light 1
  </ion-label>
  <ion-icon item-start>
    <img *ngIf="light1" class="imgON">
    <img *ngIf="!light1" class="imgOFF">
  </ion-icon>
</ion-item>

score -1 · Answer 7 · answered Aug 14 '15 at 09:30

-1

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">
      <span></span>
</span>

answered Aug 14 '15 at 09:30

iouhammi

1,108
15
29

Not sure this will fix your issue in a long term. When images are not showing in ionic it/s mostly because you need to mention the width and height of your image. – Nizar B. Apr 21 '16 at 19:21

Ionic background-image not showing on device

7 Answers7