Question / Help BrowserSource ChatBox transparency issue

T

ToastySmexy

New Member
I've been trying to apply a slightly transparent background for a chat box through a BrowserSource, but none of the changes I make seem to actually do anything. The URL for the source I use is through StreamLabs. Then, in the CSS input for OBS BrowserSource, I only have the following:

body { background-color: rgba(0, 0, 0, 0.1); margin: 0px auto; overflow: hidden; }

It shows up as completely transparent though, but it always has an instant where it shows the transparency level I want before becoming completely transparent again.

I uploaded an unlisted video to show what I mean. I reapply the source multiple times, changing the 0.1 value to a few others, and it always shows what it's supposed to look like for a moment before going away, and I'm not sure what the problem is.

**not included in video, but I did some color changes to see if they would work, and it does the same thing, such as changing to a solid green for a moment before becoming transparent again

https://youtu.be/J7MbdpFumHM
 
O

Osiris

Active Member
You need to add !important to the background-color so it gets priority over the style attribute in the <body> tag, like so:
Code: 
body { background-color: rgba(0, 0, 0, 0.1) !important; margin: 0px auto; overflow: hidden; }
 
You must log in or register to reply here.
Top