आयनिक साइड मेनू में पृष्ठभूमि छवि को कैसे जोड़ें

Question

मेरे पास एक आयनिक साइड मेनू है। मैं पृष्ठभूमि-छवि जोड़ना चाहता हूं। साइड -मेनू कोड निम्न हैं।

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

आयनिक पक्ष मेनू

Answer 1

लिए पृष्ठभूमि छवि को जोड़ने के लिए कैसे इस प्रकार आप अपने कस्टम सीएसएस परिभाषित कर सकते हैं:

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

और उचित 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> 

यहां एक कोडपेन है: http://codepen.io/beaver71/pen/WrqgNm

,210

Answer 2

खैर मैं बिल्कुल नहीं जानता कि अगर यह सही तरीका होगा, लेकिन आप अपने अपने मामले <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> 

यह मदद कर सकता है में यह कोशिश कर सकते हैं।