Widget background elemets overflowing and beind hidden.

[xxxScorpion]

Know nothing about CSS upfront, I've googled the options relevant to some of the properties and tried them as such but it didnt help much.

@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;
    background-image: url("https://thumb.ibb.co/kWUua5/blue_shout_bar.png");
    position: fixed;
    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-repeat: no-repeat;
    background-size: contain;
}

In the Info content I made a background 400x94 per the WxH of that section but the background image is still enlarged and spills out of the panel and becomes hidden. No idea how to get it to retain the size so I can change the graphic accordingly and it shows the whole thing.

[xxxScorpion]

I don't see the edit function. Replied again to say I mostly figured it out after messing with it and checking the other info containers.

[TheNumbLock]

Do you still need help?
What exactly are you trying to do?

[xxxScorpion]

Do you still need help?
What exactly are you trying to do?

I got it thank you. What I was trying to do was remove add background images to the widget panel and get all the text sized and displayed correctly within those images I made as background boxes. After messing around for like, the last 12 hrs and checking CSS options online I got it though.