Come aggiungere l'immagine di sfondo al menu laterale ionico

Question

ho un menu laterale ionico. Voglio aggiungere background-image.Side -Menu stanno seguendo i codici.

<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> 

Come aggiungere un'immagine di sfondo al menu laterale ionica

Answer 1

È possibile definire il CSS personalizzato come segue:

.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; 
} 

e applicare tali classi di adeguati elementi HTML:

<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> 

Ecco una codepen: http://codepen.io/beaver71/pen/WrqgNm

Answer 2

Beh io non so esattamente se questo sarebbe il modo giusto, ma si può provare questo nella vostra <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> 

Potrebbe aiutare il vostro caso.