CODEWITHSUNDEEP
htmlcssangularjsbackground-imageionic-framework
cflann
cflann

Reputation: 309

Ionic background-image not showing on device

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.

Upvotes: 12

Views: 11938

Answers (7)

user8494100
user8494100

Reputation: 

.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>

Upvotes: 0

Sam
Sam

Reputation: 149

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

increase height which is suitable for you

Upvotes: 0

RileyManda
RileyManda

Reputation: 2641

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 '

Upvotes: 1

Sako73
Sako73

Reputation: 10137

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.

Upvotes: 3

iouhammi
iouhammi

Reputation: 1108

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>

Upvotes: -1

Aidan Doherty
Aidan Doherty

Reputation: 1072

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;

}

Upvotes: 1

MattDionis
MattDionis

Reputation: 3616

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

Upvotes: 5

Related Questions