# Ion-item make background transparent

**URL:** <https://forum.ionicframework.com/t/ion-item-make-background-transparent/207700>\
**Category:** Ionic Framework\
**Created:** [April 5, 2021, 10:17pm UTC](https://forum.ionicframework.com/t/ion-item-make-background-transparent/207700 "2021-04-05T22:17:47Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![Petrean](https://avatars.discourse-cdn.com/v4/letter/p/cab0a1/32.png) [@Petrean](https://forum.ionicframework.com/u/Petrean)\
**Post date:** [April 5, 2021, 10:17pm UTC](https://forum.ionicframework.com/t/ion-item-make-background-transparent/207700/1 "2021-04-05T22:17:47Z")

</div>

I am trying to have a toolbar and also ion-items transparent with the toolbar I have managed to make it transparent but from some reason with ion item is different I am using ionic 5 and I have tried some solutions for ionic 4 and 3 but with no success  
can someone please help me what am I doing wrong my html is

> ```
> <ion-input (click)="chooseOrigin()" placeholder="Where do you want to pickup?" type="text"
> 
> value="{{origin ? origin.vicinity : '' }}"></ion-input>
> 
> ```
> 
> ```
> <ion-input (click)="chooseDestination()" placeholder="Where do you want to drop?" type="text"
> 
> value="{{ destination ? destination.vicinity : '' }}"></ion-input>
> 
> </ion-item>
> 
> ```

as for the styling here is the code

> .item-md {
> 
> ```
> background-color: transparent;
> 
> ```
> 
> }
> 
> .item-ios {
> 
> ```
> background-color: transparent;
> 
> ```
> 
> }
> 
> ion-list {
> 
> ```
> --ion-background-color: transparent !important;
> 
> --ion-border-color: transparent !important;
> 
> ```
> 
> }
> 
> ion-item {
> 
> ```
> --background: rgba(0, 0, 0, 0);
> 
> --border-color: rgba(0, 0, 0, 0);
> 
> ```
> 
> }

---

<div class="post-metadata">

**Author:** ![dotman](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/dotman/32/124290_2.png) [@dotman](https://forum.ionicframework.com/u/dotman)\
**Post date:** [April 6, 2021, 12:42am UTC](https://forum.ionicframework.com/t/ion-item-make-background-transparent/207700/2 "2021-04-06T00:42:32Z")

</div>

Just do this `ion-item { --background: transparent !important; }`

---

<div class="post-metadata">

**Author:** ![Petrean](https://avatars.discourse-cdn.com/v4/letter/p/cab0a1/32.png) [@Petrean](https://forum.ionicframework.com/u/Petrean)\
**Post date:** [April 6, 2021, 1:01am UTC](https://forum.ionicframework.com/t/ion-item-make-background-transparent/207700/3 "2021-04-06T01:01:32Z")

</div>

Hi I have already tried it and it does work thank you for your reply.

---

<div class="post-metadata">

**Author:** ![Path-A](https://avatars.discourse-cdn.com/v4/letter/p/0ea827/32.png) [@Path-A](https://forum.ionicframework.com/u/Path-A)\
**Post date:** [April 6, 2021, 1:27am UTC](https://forum.ionicframework.com/t/ion-item-make-background-transparent/207700/4 "2021-04-06T01:27:13Z")

</div>

Petrean, how were you able to also get the toolbar transparent? I can’t seem to get it to work.

---

<div class="post-metadata">

**Author:** ![Petrean](https://avatars.discourse-cdn.com/v4/letter/p/cab0a1/32.png) [@Petrean](https://forum.ionicframework.com/u/Petrean)\
**Post date:** [April 6, 2021, 1:32am UTC](https://forum.ionicframework.com/t/ion-item-make-background-transparent/207700/5 "2021-04-06T01:32:03Z")

</div>

You need to define this code in your scss but I have managed to do it only for toolbar that is in footer now I get it kind of different when it comes to toolbar from ion-header it is annoying but the white color with background will no dissapear.  
Here is the code:

> :root {  
> –ion-toolbar-background: transparent;  
> }

---

<div class="post-metadata">

**Author:** ![Path-A](https://avatars.discourse-cdn.com/v4/letter/p/0ea827/32.png) [@Path-A](https://forum.ionicframework.com/u/Path-A)\
**Post date:** [April 6, 2021, 1:34am UTC](https://forum.ionicframework.com/t/ion-item-make-background-transparent/207700/6 "2021-04-06T01:34:30Z")

</div>

Thanks! That’s the current problem I have. It’s in the header and I can’t make the white color go away. ☹ At least we can make the footer look nice!

---

<div class="post-metadata">

**Author:** ![Petrean](https://avatars.discourse-cdn.com/v4/letter/p/cab0a1/32.png) [@Petrean](https://forum.ionicframework.com/u/Petrean)\
**Post date:** [April 6, 2021, 1:54am UTC](https://forum.ionicframework.com/t/ion-item-make-background-transparent/207700/7 "2021-04-06T01:54:29Z")

</div>

welcome the even stranger thing is that I have one project in ionic 4 that I have made this even with the header but when I try to replicate to ionic 5 it doesn’t work

---

<div class="post-metadata">

**Author:** ![rapropos](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/rapropos/32/100227_2.png) [@rapropos](https://forum.ionicframework.com/u/rapropos)\
**Post date:** [April 6, 2021, 4:25am UTC](https://forum.ionicframework.com/t/ion-item-make-background-transparent/207700/8 "2021-04-06T04:25:10Z")

</div>

> [@Petrean](#):
>
> I am trying to have a toolbar and also ion-items transparent

I don’t think this is a great idea, because the background of items is used subtly in many ways to facilitate the feedback of interactivity.

That being said, I would expect that if you really do insist on going down this road, you are going to have to set a bunch of the CSS variables documented [here](https://ionicframework.com/docs/api/item#css-shadow-parts) (not just `--background`).

---

<div class="post-metadata">

**Author:** ![Petrean](https://avatars.discourse-cdn.com/v4/letter/p/cab0a1/32.png) [@Petrean](https://forum.ionicframework.com/u/Petrean)\
**Post date:** [April 6, 2021, 6:07am UTC](https://forum.ionicframework.com/t/ion-item-make-background-transparent/207700/9 "2021-04-06T06:07:27Z")

</div>

Thank you a lot for your response I appreciate