Tuesday 23 June 2015

Adding background image in ionic

 Adding background image in ionic :-


I have set a custom class .splash_screen_bg on a page in my Ionic app in order to style it with a custom background.

The CSS for the background is

Include the following css in your style.css 

.splash_screen_bg {
  background-image: url("../img/splash_screen.png");
  background-position: center;
  background-repeat: no-repeat;
}
Here in url you give the path of image, where you stored it.

Now where you want to apply the this image you can add the class splash_screen_bg

for example
 <ion-view view-title="Login" class="splash_screen_bg">
Then use the following command to run the application in ionic

ionic serve

Now you will find out the background image on desired page where you added it.

4 comments:

  1. was it like a global background? like every background of my app have it?

    ReplyDelete
  2. how to keep the background image constant even if i am traversing between different screens?

    ReplyDelete
  3. This is a background image for each page on your app.

    ReplyDelete