How to add background image to ion sidebar

Question

I have an ionic side menu. I want to add background-image.Side -Menu codes follow.

<ion-side-menus enable-menu-with-back-views="true"> <ion-side-menu-content> <ion-nav-bar class="bar-dark"> <ion-nav-back-button> </ion-nav-back-button> <ion-nav-buttons side="left"> <button class="button button-icon button-clear ion-navicon" menu-toggle="left"></button> </ion-nav-buttons> <ion-nav-buttons side="right"> <button class="button button-icon button-clear ion-log-out" ng-click="logout()"></button> </ion-nav-buttons> </ion-nav-bar> <ion-nav-view name="menuContent" style="background-color:red;"> </ion-nav-view> </ion-side-menu-content> <ion-side-menu side="left"> <ion-header-bar class="bar-dark"> <h1 class="title">Menu</h1> </ion-header-bar> <ion-content> <ion-list> <ion-item menu-close href="#/app/dashboard"> <i class="icon icon-dashboard" style="font-size:20px;margin-right:10px;"></i> Dashboard </ion-item> <ion-item 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> </ion-side-menus> 

How to add background image to ion sidebar

Answer 1

You can define your own 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 these classes to the corresponding HTML elements:

 <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 the code: http://codepen.io/beaver71/pen/WrqgNm

Answer 2

Well, I don’t know exactly if it was right, but you can try it in your <ion-content> </ion-content>

 <ion-content style="background: url('img/a.jpg'); background-size: cover;"> <ion-list> <ion-item menu-close href="#/app/dashboard"> <i class="icon icon-dashboard" style="font-size:20px;margin-right:10px;"></i> Dashboard </ion-item> <ion-item 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> 

This may help your case.