# Popup transparent

**URL:** <https://forum.inductiveautomation.com/t/popup-transparent/116542>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [July 27, 2026, 3:23pm UTC](https://forum.inductiveautomation.com/t/popup-transparent/116542 "2026-07-27T15:23:09Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Jose\_Hervas\_Chico](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/jose_hervas_chico/32/69260_2.png) [@Jose\_Hervas\_Chico](https://forum.inductiveautomation.com/u/Jose_Hervas_Chico)\
**Post date:** [July 27, 2026, 3:23pm UTC](https://forum.inductiveautomation.com/t/popup-transparent/116542/1 "2026-07-27T15:23:09Z")

</div>

Hello!

can anyone tell me how to make the background of a popup fully transparent?

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/b/c/bc1c7cdb59ac70fb314f62030cc14428d98af451.png)

Now root container has background transparency set, but does not works.

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/d/e/de5cd4a832522f0f4c2fe6485e3286eaceb558e1.png)

thanks!!

---

<div class="post-metadata">

**Author:** ![Sanganak\_Kasare](https://avatars.discourse-cdn.com/v4/letter/s/8c91f0/32.png) [@Sanganak\_Kasare](https://forum.inductiveautomation.com/u/Sanganak_Kasare)\
**Post date:** [July 27, 2026, 3:34pm UTC](https://forum.inductiveautomation.com/t/popup-transparent/116542/2 "2026-07-27T15:34:04Z")

</div>

This thread might help, it covers exactly how to target specific Perspective popups using their popup ID, including making only selected popups transparent via "stylesheet.css":

> [@Perspective popup transparency](https://forum.inductiveautomation.com/t/perspective-popup-transparency/88043/10):
>
> Base your css selector on the popup's id. Ie, you open the popup with this id "foo". You can add #popup-foo { background: transparent; } But I suggest you push things a bit further and use a prefix in that id, so you can apply it to any popup you want. Let's say you want a way to make popups's background transparent. Give them an id that starts with 'transparent', ie "transparent\_foo". Now you can use this css: .ia\_popup[id^=popup-transparent] { background: transparent; } Now an…

---

<div class="post-metadata">

**Author:** ![ray](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/ray/32/11451_2.png) [@ray](https://forum.inductiveautomation.com/u/ray)\
**Post date:** [July 27, 2026, 4:38pm UTC](https://forum.inductiveautomation.com/t/popup-transparent/116542/3 "2026-07-27T16:38:23Z")

</div>

@Sanganak_Kasare has already put you on the right track – I'll just add some details to get you moving quickly towards a solution here.

First, enable the Advanced Stylesheet via a right click on the Styles folder within the Perspective project browser node.

 ![Screenshot 2026-07-27 at 9.34.50 AM](https://us1.discourse-cdn.com/inductiveautomation/original/3X/3/b/3b9f39f28cb99e12ed0496430bdedcc277f60aa6.png)

Within that new project resource – target the popup and set the background to transparent. You may also want to remove the default border for a fully transparent effect.

```python
.ia_popup {
    background-color: transparent;
    border: none;
}

```

That should do it, happy developing!

---

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [July 28, 2026, 12:56pm UTC](https://forum.inductiveautomation.com/t/popup-transparent/116542/4 "2026-07-28T12:56:11Z")

</div>

Note you probably want to require a style class for the rule as well so it doesn't apply to all popups

```python
.psc-YourStylesClassName .ia_popup {

```

---

<div class="post-metadata">

**Author:** ![Jose\_Hervas\_Chico](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/jose_hervas_chico/32/69260_2.png) [@Jose\_Hervas\_Chico](https://forum.inductiveautomation.com/u/Jose_Hervas_Chico)\
**Post date:** [July 28, 2026, 2:33pm UTC](https://forum.inductiveautomation.com/t/popup-transparent/116542/5 "2026-07-28T14:33:52Z")

</div>

Amazing guys, thanks a lot!!!!

It is impressive how can we combine the CSS in our views.

---

<div class="post-metadata">

**Author:** ![pascal.fragnoud](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pascal.fragnoud/32/24728_2.png) [@pascal.fragnoud](https://forum.inductiveautomation.com/u/pascal.fragnoud)\
**Post date:** [July 29, 2026, 10:06am UTC](https://forum.inductiveautomation.com/t/popup-transparent/116542/6 "2026-07-29T10:06:46Z")

</div>

Where would you put that class ?  
If you put it on the popup view's root, that selector should not work.  
You'd need to use `has()`: `.ia_popup:has(.psc-yourClass) {...}`

Or use ids as described in the post linked above. It's what I used before `has` was a thing and I got used to it.