# Weird background colour on buttons, images, and other transparency things

**URL:** <https://forum.inductiveautomation.com/t/weird-background-colour-on-buttons-images-and-other-transparency-things/83397>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [December 20, 2023, 8:52pm UTC](https://forum.inductiveautomation.com/t/weird-background-colour-on-buttons-images-and-other-transparency-things/83397 "2023-12-20T20:52:54Z")\
**Posts on this page:** 16\
**Page:** 1

<div class="post-metadata">

**Author:** ![ian.sebryk](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/ian.sebryk/32/49319_2.png) [@ian.sebryk](https://forum.inductiveautomation.com/u/ian.sebryk)\
**Post date:** [December 20, 2023, 8:52pm UTC](https://forum.inductiveautomation.com/t/weird-background-colour-on-buttons-images-and-other-transparency-things/83397/1 "2023-12-20T20:52:54Z")

</div>

i am building a lamp board, using SVGs with obvious transparency because lamp -\> round, not lamp-square. but when i do, i get an odd blue background filling in the bounds of the component. witness:

![Screenshot 2023-12-20 133255](https://us1.discourse-cdn.com/inductiveautomation/original/3X/a/7/a70378735b2689d0876fac743610dda8dea775aa.png)

aesthetic trauma and future psychological counselling aside, where is this coming from and how to i stop it? looks like goat vomit.

###### i grew up on a farm. i know goat vomit when i see it.

---

<div class="post-metadata">

**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\
**Post date:** [December 20, 2023, 8:55pm UTC](https://forum.inductiveautomation.com/t/weird-background-colour-on-buttons-images-and-other-transparency-things/83397/2 "2023-12-20T20:55:06Z")

</div>

Vision or Perspective? Add the tag into your question title.

---

<div class="post-metadata">

**Author:** ![ian.sebryk](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/ian.sebryk/32/49319_2.png) [@ian.sebryk](https://forum.inductiveautomation.com/u/ian.sebryk)\
**Post date:** [December 20, 2023, 8:56pm UTC](https://forum.inductiveautomation.com/t/weird-background-colour-on-buttons-images-and-other-transparency-things/83397/3 "2023-12-20T20:56:33Z")

</div>

it's tagged Perspective, but OK. adding now.

---

<div class="post-metadata">

**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\
**Post date:** [December 20, 2023, 8:58pm UTC](https://forum.inductiveautomation.com/t/weird-background-colour-on-buttons-images-and-other-transparency-things/83397/4 "2023-12-20T20:58:24Z")

</div>

Sorry, did I not see the tag? If the tag is there then there's no need for Perspective in the title. I've removed it for you. Thanks!

Where are you seeing this? In Designer or in the browser?

How are you generating the SVGs?

---

<div class="post-metadata">

**Author:** ![paul-griffith](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/paul-griffith/32/37249_2.png) [@paul-griffith](https://forum.inductiveautomation.com/u/paul-griffith)\
**Post date:** [December 20, 2023, 8:58pm UTC](https://forum.inductiveautomation.com/t/weird-background-colour-on-buttons-images-and-other-transparency-things/83397/5 "2023-12-20T20:58:58Z")

</div>

Can you upload one of these SVGs here on the forum?

---

<div class="post-metadata">

**Author:** ![ian.sebryk](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/ian.sebryk/32/49319_2.png) [@ian.sebryk](https://forum.inductiveautomation.com/u/ian.sebryk)\
**Post date:** [December 20, 2023, 9:12pm UTC](https://forum.inductiveautomation.com/t/weird-background-colour-on-buttons-images-and-other-transparency-things/83397/6 "2023-12-20T21:12:18Z")

</div>

> [@Transistor](#):
>
> Where are you seeing this?

both. and it comes and goes. sometimes, it's just fine, although there is still that 1px frame around it. other times: (no emoji for goat vomit...)

> [@paul-griffith](#):
>
> Can you upload one of these SVGs here on the forum?

here you go. made in Illustrator (trying to kype my assets, eh Paul? 😃 jk. ):  
 ![BlueLamp](https://us1.discourse-cdn.com/inductiveautomation/original/3X/8/8/884db23c45b5c86ce1de90e5e44f552c8bf5429f.svg)

FWIW, it also shows up with the other colours: Red, Yellow, Grey, Green, &c.

---

<div class="post-metadata">

**Author:** ![Felipe\_CRM](https://avatars.discourse-cdn.com/v4/letter/f/dfb087/32.png) [@Felipe\_CRM](https://forum.inductiveautomation.com/u/Felipe_CRM)\
**Post date:** [December 20, 2023, 9:34pm UTC](https://forum.inductiveautomation.com/t/weird-background-colour-on-buttons-images-and-other-transparency-things/83397/7 "2023-12-20T21:34:47Z")

</div>

Are you using "save and link" or "embed" to add the lamp images?

EDIT: The color and border rounding looks suspiciously like the default Perspective (primary) button style, not sure if that's relevant to the issue or not.

---

<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:** [December 20, 2023, 9:45pm UTC](https://forum.inductiveautomation.com/t/weird-background-colour-on-buttons-images-and-other-transparency-things/83397/8 "2023-12-20T21:45:57Z")

</div>

> [@Felipe\_CRM](#):
>
> The color and border rounding looks suspiciously like the default Perspective (primary) button

I noticed that too. I embedded it on my gateway and I did not get this behavior (8.1.32). Maybe something to do with stylesheet.css?

> [@ian.sebryk](#):
>
> no emoji for goat vomit...

🐐 🤮

---

<div class="post-metadata">

**Author:** ![ian.sebryk](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/ian.sebryk/32/49319_2.png) [@ian.sebryk](https://forum.inductiveautomation.com/u/ian.sebryk)\
**Post date:** [December 20, 2023, 10:12pm UTC](https://forum.inductiveautomation.com/t/weird-background-colour-on-buttons-images-and-other-transparency-things/83397/9 "2023-12-20T22:12:37Z")

</div>

if it helps, this is the process i go through working with images:

1. i build as many assets as i can, from scratch, in Illustrator. these were a 5min whip-up because i've built literally hundreds of these before.
2. i drag-n-drop the images into their respective folder in Image Manager and the copy the path to the image once they've finished uploading
3. i then paste the image path on the button/image/thingy

most times, i sit back and pat myself on the back for making such visual wonder. today, i hear bleating... 😱 the curious part is that it is intermittent. and i've tried it in various browsers, not just my go-to: Firefox. Chrome, Edge, even Opera: same odd behaviour.

if we're not finding a solution, i know i can (oddly enough) at least _override_ the colour by adding a `background-color` property to the component. usually, doing this, and then removing it, will mop up the vomit, as it were. 🙂

---

<div class="post-metadata">

**Author:** ![ian.sebryk](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/ian.sebryk/32/49319_2.png) [@ian.sebryk](https://forum.inductiveautomation.com/u/ian.sebryk)\
**Post date:** [December 20, 2023, 10:13pm UTC](https://forum.inductiveautomation.com/t/weird-background-colour-on-buttons-images-and-other-transparency-things/83397/10 "2023-12-20T22:13:31Z")

</div>

> [@dkhayes117](#):
>
> 🐐 🤮

so. beautiful. 😍

---

<div class="post-metadata">

**Author:** ![pturmel](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pturmel/32/3295_2.png) [@pturmel](https://forum.inductiveautomation.com/u/pturmel)\
**Post date:** [December 20, 2023, 10:38pm UTC](https://forum.inductiveautomation.com/t/weird-background-colour-on-buttons-images-and-other-transparency-things/83397/11 "2023-12-20T22:38:32Z")

</div>

> [@ian.sebryk](#):
>
> goat vomit

My mom grew up on a farm, too. She even had a **pet** goat. Just how old **are** you? (My mom is 86.) 😆

---

<div class="post-metadata">

**Author:** ![lrose](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/lrose/32/62724_2.png) [@lrose](https://forum.inductiveautomation.com/u/lrose)\
**Post date:** [December 20, 2023, 10:49pm UTC](https://forum.inductiveautomation.com/t/weird-background-colour-on-buttons-images-and-other-transparency-things/83397/12 "2023-12-20T22:49:42Z")

</div>

> [@ian.sebryk](#):
>
> i then paste the image path on the button/image/thingy

This is undoubtedly the root of your issue.

If these are lamps, do they also need user interaction? Why not just embed the SVG?

---

<div class="post-metadata">

**Author:** ![ian.sebryk](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/ian.sebryk/32/49319_2.png) [@ian.sebryk](https://forum.inductiveautomation.com/u/ian.sebryk)\
**Post date:** [December 21, 2023, 3:37pm UTC](https://forum.inductiveautomation.com/t/weird-background-colour-on-buttons-images-and-other-transparency-things/83397/13 "2023-12-21T15:37:38Z")

</div>

> [@lrose](#):
>
> This is undoubtedly the root of your issue.

how so? the images show when the signal quality is `Good`, so it isn't a pathing issue. i will be back at my desk in an hour and will test the other suggestions. but i don't think the path is the problem simply because it works. just not offline/bad signal. 💩

---

<div class="post-metadata">

**Author:** ![ian.sebryk](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/ian.sebryk/32/49319_2.png) [@ian.sebryk](https://forum.inductiveautomation.com/u/ian.sebryk)\
**Post date:** [December 21, 2023, 3:39pm UTC](https://forum.inductiveautomation.com/t/weird-background-colour-on-buttons-images-and-other-transparency-things/83397/14 "2023-12-21T15:39:02Z")

</div>

i'm from Northern Canada. we still have farms there that haven't been swallowed by the Industrial Juggernaut of Commerce. 😃 there's a lot of us farm kids in tech. it was the best way out of all the goat vomit. 😆

---

<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:** [December 21, 2023, 3:51pm UTC](https://forum.inductiveautomation.com/t/weird-background-colour-on-buttons-images-and-other-transparency-things/83397/15 "2023-12-21T15:51:02Z")

</div>

> [@ian.sebryk](#):
>
> how so?

Because you are using a button which has a default background color in the `C:\Program Files\Inductive Automation\Ignition\data\modules\com.inductiveautomation.perspective\themes\light\common\button.css` file (for windows)

```auto
.ia_button--primary {
    background-color: var(--callToAction);
    border: var(--containerBorder);
    color: var(--neutral-10);
}

```

---

<div class="post-metadata">

**Author:** ![ian.sebryk](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/ian.sebryk/32/49319_2.png) [@ian.sebryk](https://forum.inductiveautomation.com/u/ian.sebryk)\
**Post date:** [December 21, 2023, 4:33pm UTC](https://forum.inductiveautomation.com/t/weird-background-colour-on-buttons-images-and-other-transparency-things/83397/16 "2023-12-21T16:33:05Z")

</div>

well that is something i never thought to _ **ever** _ check... thank you very much. this would have driven me batty (more batty??). 😃
