# Background Image Alpha Channel

**URL:** <https://forum.inductiveautomation.com/t/background-image-alpha-channel/113177>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [January 9, 2026, 2:07pm UTC](https://forum.inductiveautomation.com/t/background-image-alpha-channel/113177 "2026-01-09T14:07:23Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![jseffinga](https://avatars.discourse-cdn.com/v4/letter/j/a3d4f5/32.png) [@jseffinga](https://forum.inductiveautomation.com/u/jseffinga)\
**Post date:** [January 9, 2026, 2:07pm UTC](https://forum.inductiveautomation.com/t/background-image-alpha-channel/113177/1 "2026-01-09T14:07:23Z")

</div>

I got a background image on my perspective page but I would like it to be more like a watermark. is there a way to adjust the alpha channel on an background image in perspective?

---

<div class="post-metadata">

**Author:** ![travisaggiebrown](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/travisaggiebrown/32/85824_2.png) [@travisaggiebrown](https://forum.inductiveautomation.com/u/travisaggiebrown)\
**Post date:** [January 9, 2026, 6:35pm UTC](https://forum.inductiveautomation.com/t/background-image-alpha-channel/113177/2 "2026-01-09T18:35:54Z")

</div>

like do you have the background image set to the root container? if so, you should be able to add opacity: 0.5 to the style to change the transparency, obviously you can change the .5 to whatever you need

---

<div class="post-metadata">

**Author:** ![dkhayes117](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/dkhayes117/32/68344_2.png) [@dkhayes117](https://forum.inductiveautomation.com/u/dkhayes117)\
**Post date:** [January 9, 2026, 7:17pm UTC](https://forum.inductiveautomation.com/t/background-image-alpha-channel/113177/3 "2026-01-09T19:17:17Z")

</div>

That will change the opacity on everything displayed not just the background image.

You might have better luck using an image component and applying an opacity value to it. In my tesing, I used these style properties in a flex container:

```python
{
  "classes": "",
  "opacity": 0.2,
  "position": "absolute",
  "pointer-events": "none",
  "width": "100%",
  "height": "100%"
}

```

---

<div class="post-metadata">

**Author:** ![travisaggiebrown](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/travisaggiebrown/32/85824_2.png) [@travisaggiebrown](https://forum.inductiveautomation.com/u/travisaggiebrown)\
**Post date:** [January 9, 2026, 7:26pm UTC](https://forum.inductiveautomation.com/t/background-image-alpha-channel/113177/4 "2026-01-09T19:26:36Z")

</div>

yeah, thanks for pointing out my mistake you are right, I know that at some point I had copied some CSS injection I found somewhere, and I believe it’s possible to add the opacity to the line for the background image where it doesn’t affect other props, but I can’t for the life of me remember where I put that or what I got it from. This is definitely probably the better solution overall

---

<div class="post-metadata">

**Author:** ![jseffinga](https://avatars.discourse-cdn.com/v4/letter/j/a3d4f5/32.png) [@jseffinga](https://forum.inductiveautomation.com/u/jseffinga)\
**Post date:** [January 9, 2026, 7:40pm UTC](https://forum.inductiveautomation.com/t/background-image-alpha-channel/113177/5 "2026-01-09T19:40:31Z")

</div>

how do i make that image container to be in the background of a flex container tho?

---

<div class="post-metadata">

**Author:** ![dkhayes117](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/dkhayes117/32/68344_2.png) [@dkhayes117](https://forum.inductiveautomation.com/u/dkhayes117)\
**Post date:** [January 9, 2026, 7:56pm UTC](https://forum.inductiveautomation.com/t/background-image-alpha-channel/113177/6 "2026-01-09T19:56:19Z")

</div>

Can you not change the opacity/color of the image before importing into the project?

You can use `zIndex` in style props to push the image backwards, but it might get cumbersome doing that.

There is a way to add a custom selector in advanced stylesheet, maybe `before`, to target opacity to the background image only, but I've not tried it.

Google and research css background image opacity and search on the forum for advanced stylesheet examples.