Ionic full screen background image


Ionic full screen background image : In ionic framework full screen background image can be added using css. Here in this tutorial we are going to explain how to add full screen background image in ionic framework with example and demo.


Ionic full screen background image

You can add the full background image in ionic framework simply adding the class .pane in ionic view and add the background image to this class as below-

Ionic full screen background image Example & Demo:

<ion-view view-title="My Page" class="pane">
    <ion-content>
      Hello World!
    </ion-content>
</ion-view>

<style type="text/css">
.pane{
background:url('http://tutorialsplane.com/wp-content/uploads/2016/02/1511516_1035103706511033_695479665952545706_n.jpg') no-repeat center center fixed; 
        -webkit-background-size: cover;
        -moz-background-size: cover;
        background-size: cover;
}
</style>

Try it »

If you run the above example it will produce the following output –

Ionic full screen background image Add


Advertisements

Add Comment

📖 Read More