one background image not showing while another is - css

Question

I have two images in the same directory. When I try to use one as a background image using css it does not show but when I use the other it does. What in the world is going on here?
Just for reference here is my css code.
This one does not work
a:hover {
background-image: url("images/menu-ident.png");
background-size: 110px;
background-repeat: no-repeat;
background-color: transparent;
background-position: bottom center;
color: rgba(255, 255, 255, 1);
}
This one does work
a:hover {
background-image: url("images/logo.png");
background-size: 110px;
background-repeat: no-repeat;
background-color: transparent;
background-position: bottom center;
color: rgba(255, 255, 255, 1);
}

Answer 1

of course this doesn't work - the second one overwrites the first one (same elements selected). if you want to have multiple background-images on the same element look here: https://w3schools.com/css/css3_backgrounds.asp
a:hover {
background-image: url("images/menu-ident.png"), url("images/logo.png");
background-size: 110px;
background-repeat: no-repeat;
background-color: transparent;
background-position: bottom center;
color: rgba(255, 255, 255, 1);
}
if you need two differents backgrounds for two different elements you need different css selectors like classes or ids:
a.bg-1:hover {
background-image: url("images/menu-ident.png");
background-size: 110px;
background-repeat: no-repeat;
background-color: transparent;
background-position: bottom center;
color: rgba(255, 255, 255, 1);
}
a.bg-2:hover {
background-image: url("images/logo.png");
background-size: 110px;
background-repeat: no-repeat;
background-color: transparent;
background-position: bottom center;
color: rgba(255, 255, 255, 1);
}