How to overlay an image using css without changing html?

Question

css

How to overlay another image on top of facebook.svg using css without changing this code? Haven't succeeded yet...

<ul id="id1">
  <li id="id-facebook">
    <a href="https://www.facebook.com/foo">
      <img src="https://example.com/images/facebook.svg" width="18" height="18" alt="Facebook">
    </a>
  </li>
</ul>

Answer 1

Something like this:

#id-facebook a {
  position: relative;
  z-index: 1;
}
#id-facebook a:after {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background-image: url(...);
  background-size: cover;
  z-index: 2;
}

But it’s not a fact that it will work right away, you didn’t show what css you have.

Answer 2

htmlbook.ru/css/before/after , z-index and background-image