Pfthb

I have tried multiple sources online and ended up putting many things together. I know individually how they work but not sure what I do wrong here.

My CSS looks like this:

 .chatButton 
 position: fixed;
 border: 0;
 overflow: hidden;
 bottom: 50px;
 right: 50px;
 border-radius: 50%; 
 width: 70px;
 height: 70px;
 box-shadow: 0px 5px 10px #888888;
 transition: all ease 0.3s;
 background-image: url('https://freeiconshop.com/wp-content/uploads/edd/chat-outline.png') no-repeat center center fixed;
 background-size: contain;
 background-position: center;
 background-color: inherit;

.chatButton:hover background-color: #888888; bottom: 55px;

.chatButton:active 
 box-shadow: 0 3px 0 #888888;

And my html like this:

<oj-button class="chatButton" on-oj-action="[[openListener]]">

 </oj-button>

I am using oracle jet, but even if I remove oj-button and use a normal button I can't get the background image to show up.

Any ideas?

So i'm new to oracle jet but here is something i found:

There is some issues with using the background-image properties.

Here is some Examples from oracle:

I found a fiddle with an example where oracle jet is used.

As you can see i added your button and the css. There i had the same issues with no image. Even after the css changes as listed in the comments.

With the changes from the oracle example i added a span inside the button and added this css:

.chatButton span
 height:60%;
 content: url('https://freeiconshop.com/wp-content/uploads/edd/chat-outline.png');

fiddle

if you want to set all the properties of the background in one line you should use background, not background-image.

background: url('https://freeiconshop.com/wp-content/uploads/edd/chat-outline.png') no-repeat center center fixed;