How to add background image to ionic side menu
You can define your custom CSS as follows:
.my-container {
background-image: url("http://www.planwallpaper.com/static/images/colorful-triangles-background_yB0qTG6.jpg");
background-repeat: repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
height: 100%;
position: absolute;
}
.transp .item-content {
background-color: transparent !important;
color: #fff;
}
and apply those classes to proper HTML items:
<ion-side-menu side="left">
<ion-header-bar class="bar-dark">
<h1 class="title">Menu</h1>
</ion-header-bar>
<ion-content class="my-container">
<ion-list>
<ion-item class="transp" menu-close href="#/app/dashboard">
<i class="icon icon-dashboard" style="font-size:20px;margin-right:10px;"></i>Dashboard
</ion-item>
<ion-item class="transp" menu-close href="#/app/dashboard">
<i class="icon icon-dashboard" style="font-size:20px;margin-right:10px;"></i>Statistics
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
Here is a codepen: http://codepen.io/beaver71/pen/WrqgNm