# List with transparent background on top of image background

**URL:** <https://forum.ionicframework.com/t/list-with-transparent-background-on-top-of-image-background/55798>\
**Category:** ionic-v3\
**Created:** [June 25, 2016, 6:02pm UTC](https://forum.ionicframework.com/t/list-with-transparent-background-on-top-of-image-background/55798 "2016-06-25T18:02:44Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![skydive](https://avatars.discourse-cdn.com/v4/letter/s/a183cd/32.png) [@skydive](https://forum.ionicframework.com/u/skydive)\
**Post date:** [June 25, 2016, 6:02pm UTC](https://forum.ionicframework.com/t/list-with-transparent-background-on-top-of-image-background/55798/1 "2016-06-25T18:02:44Z")

</div>

I have cards with background image and I need to display list on top of the image (and maybe some other UI elements later). When list is displayed it appears with white background, like this:

![image](https://global.discourse-cdn.com/ionicframework/original/3X/1/6/16276dfc6dfd70e8a5395b3a0271a51635d754e5.png)

Any idea how to make the background of the list transparent?

Here is my html:

```
 <ion-card *ngFor="let item of items" (click)="onCardClick($event, item)">
     <div *ngIf="displayFlag">
          <img src="{{img}}">
          <div class="card-title">{{name}}</div>
          <div class="card-subtitle">{{description}}</div>
           <ion-list no-lines class="card-background">
                 <ion-item *ngFor="let categorie of Categories" >
                    <div>{{categorie}}</div>
                 </ion-item>
           </ion-list>
       </div>
    </ion-card>

```

Here is scss:

```
ion-card {
    position: relative;
    text-align: center;
  }

  .card-title {
    position: absolute;
    top: 36%;
    font-size: 2.0em;
    width: 100%;
    font-weight: bold;
    color: #fff;
  }

  .card-subtitle {
    font-size: 1.5em;
    position: absolute;
    top: 52%;
    width: 100%;
    color: #fff;
  }

  ion-list.card-background{
      position: absolute;
      left: 40%;
      top: 80%;
  }

}

.item .item-content {
  background-color: transparent !important;
}

```

Thanks.

---

<div class="post-metadata">

**Author:** ![skydive](https://avatars.discourse-cdn.com/v4/letter/s/a183cd/32.png) [@skydive](https://forum.ionicframework.com/u/skydive)\
**Post date:** [June 25, 2016, 7:27pm UTC](https://forum.ionicframework.com/t/list-with-transparent-background-on-top-of-image-background/55798/2 "2016-06-25T19:27:24Z")

</div>

Ok, figured it out. Not sure this is the right way to do it, but at least it worked:

```
  ion-list.card-background{
      position: absolute;
      left: 40%;
      top: 80%;
      background-color: rgba(0, 0, 0, 0);
  }

  ion-item.item-trns {
    background-color: rgba(0, 0, 0, 0);
    color: white;
   }

```

And in html:

```
<ion-item *ngFor="let categorie of categories" class="item-trns">
       <div>{{categorie}}</div>
</ion-item>

```

It important to define background-color for both list and item backgrounds . Otherwise it doesn’t work.