I've put it back to the older url and used the following CSS that is working but the image/gif is tiny and I can't see how to edit the size.
@font-face {
font-family: 'Dolce Vita';
src: url('fonts/Dolce Vita.ttf');
}
#infoContainer {
width: 0px;
height: 0px;
background: none;
position: absolute;
top: 0px;
left: 0px;
overflow: hidden;
color: white;
font-family: 'Dolce Vita';
-webkit-box-shadow: none;
}
#infoHeader {
width: 400px;
height: 26px;
background: none;
position: relative;
overflow: hidden;
text-align: center;
font-size: 24px;
}
#infoContent {
width: 400px;
height: 94px;
background: none;
position: relative;
overflow: hidden;
color: white;
}
#infoContentText {
text-align: center;
display: table-cell;
height: 80px;
width: 300px;
vertical-align: middle;
}
#InfoImage {
width: 90px;
height: 90px;
float: left;
background-image: url("images/twitchLogo.png");
background-repeat: no-repeat;
background-size: contain;
}