The image linked in the CSS is a png and the outside around the image is transparent but it appears black when the widget is used. How do I got about removing the black?
CSS
@font-face {
font-family: 'Calibri';
src: url('fonts/Calibri.ttf');
}
#infoContainer {
width: 262px;
height: 55px;
background: none;
position: absolute;
top: 0px;
left: 0px;
overflow: hidden;
color: none;
font-family: 'Calibri';
-webkit-box-shadow: none;
}
#infoHeader {
width: 264px;
height: 24px;
background: none;
background-image: url("none");
background-repeat: no-repeat;
background-size: 300px 24px;
position: relative;
top: 0px;
left: -10px;
overflow: hidden;
line-height: 250%;
text-align: center;
font-size: 13px;
vertical-align:bottom;
}
#infoContent {
width: 100%;
height: 100%;
background: none;
background-image: url("
https://preview.ibb.co/nfrbaQ/new_brand_shout_bar_2.png");
background-repeat: no-repeat;
background-size: 100%;
position: relative;
overflow: hidden;
text-align: center;
}
#infoContentText {
width: 258px;
height: 60px;
background: none;
position: absolute;
top: 0px;
left: 2px;
overflow: hidden;
color: black;
text-transform: uppercase;
font-size: 15px;
vertical-align: middle;
}
#InfoImage {
width: 90px;
height: 90px;
float: left;
background-image: url("images/twitchLogo.png");
background-repeat: no-repeat;
background-size: contain;
}
Thanks a bunch