title: Make ionic ion-item have a transparent background
body: <p>Is there a way to make the background of an ionic 2 <code>&lt;ion-item&gt;</code> be transparent?</p>
  
  <p>I have tried this CSS but it doesn't make the item transparent:</p>
  
  <pre><code>.list .item, .item-content .item-inner .item-block .item-ios
  {
    background: transparent !important;
  }
  </code></pre>
  
  <p><strong>ADDED CODE</strong></p>
  
  <p>My HTML looks like this:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;ion-content class="pu-my-plans-background"&gt;
  
    &lt;div *ngIf="hasPlans"&gt;
      &lt;ion-list no-lines class="pu-item-list"&gt;
        &lt;!--&lt;ion-item-group reorder="true" (ionItemReorder)="reorderItems($event)"&gt;--&gt;
          &lt;ion-item-sliding *ngFor="let plan of plans; let i = index" &gt;
            &lt;ion-item class="pu-section-list-item pu-my-plans-item" (click)="editPlan(plan.id, plan.rev, plan.title, i)"&gt;
              {{ plan.title }}
              &lt;br&gt;
              &lt;span class="pu-my-plans-plan-date"&gt;{{ plan.updated}}&lt;/span&gt;
              &lt;button *ngIf="plan.important" ion-button clear item-right&gt;
                &lt;ion-icon name="ios-alert-outline"&gt;&lt;/ion-icon&gt;
              &lt;/button&gt;
            &lt;/ion-item&gt;
            &lt;ion-item-options side="right"&gt;
              &lt;button ion-button color="danger" (click)="deletePlan(plan.id, plan.rev)"&gt;
                &lt;ion-icon name="delete"&gt;&lt;/ion-icon&gt;
                Delete
              &lt;/button&gt;
            &lt;/ion-item-options&gt;
          &lt;/ion-item-sliding&gt;
        &lt;!--&lt;/ion-item-group&gt;--&gt;
      &lt;/ion-list&gt;
    &lt;/div&gt;
  
  &lt;/ion-content&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>And my CSS  like this:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>page-my-plans {
  
  }
  
  .pu-my-plans-plus-circle {
    display: block;
    //border: 2px solid white;
    background-color: $pu-orange;
    border-radius: 50%;
    height: 38px;
    width: 38px;
  }
  
  .pu-my-plans-plus-circle span {
    font-size: 38px;
    font-weight: 100;
    color: white;
    position: absolute;
    top: -7px;
    left: 8.5px;
  }
  .pu-plan-addButton {
    font-size: 30px;
    margin-right: 14px;
    margin-top:-2px;
  }
  
  
  .pu-section-list-item{
    color: white;
    background-color: black;
    font-weight:$pu-item-font-weight;
    font-size:$pu-item-font-size;
    padding-left:20px;
    padding-right:0px;
  }
  .item{
    background: transparent !important
  }
  // THEMING CSS
  // ===========
  //
  .pu-my-plans-background {
    background-image: url("../assets/img/my_plan_bg@2x.png");
    background-size: cover !important;
  }
  .pu-my-plans-item {
    border-style:solid;
    border-bottom-width: 2px;
    border-bottom-color: $pu-orange;
  }
  .pu-my-plans-plan-date {
    color: $pu-orange;
    font-size: 11px;
    font-weight: 200;
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>I have tried every combination of styling the ionic 2 items as I can think of but the best I can get with this is to get a white background behind the ion-item. The ion-content has an image background but I can't get to see this through the ion-item.</p>