CODEWITHSUNDEEP
ionic2
Deqin Chen
Deqin Chen

Reputation: 73

ionic2 background image not showing

I want set background image in pages of ionic2, 

  <style type="text/css">
    ion-content {
      background: url(../../img/background.jpg) no-repeat center center fixed;
    }
  </style>
  <ion-content  padding>
      <h2>Welcome to Ionic!</h2>
  </ion-content>

but it not showing in the device. why?

Upvotes: 0

Views: 2476

Answers (5)

Cedric
Cedric

Reputation: 149

I know it's been few monthes, but you can do it that way

<ion-content style="background-image: url('assets/images/background-image.jpg');">
    <h2>Welcome to Ionic!</h2>
</ion-content>

Upvotes: 0

Christian Gehn
Christian Gehn

Reputation: 351

Put the picture into the assets/img folder. Then use the following code in your css: 

background-image: url('../assets/img/background.jpg')

This is because Ionic will search for your images relative to your index.html.

Upvotes: 0

Juxture
Juxture

Reputation: 253

You should add the background to .scroll-content like so: 

<style type="text/css">
    .scroll-content {
      background: url(../../img/background.jpg) no-repeat center center fixed;
    }
  </style>
  <ion-content  padding>
      <h2>Welcome to Ionic!</h2>
  </ion-content>

Upvotes: 0

digit
digit

Reputation: 4565

Try this

.content-md {
  background: url("../../img/background.jpg") no-repeat;
}

Upvotes: 0

Huiting
Huiting

Reputation: 1396

Add to your css for the ion-content:

  background-size: cover;
  background-color: transparent;

Upvotes: 0

Related Questions