2

I'm using a pseudo element to display a fallback profile picture when a user does not upload his/her own. The fallback picture works well on Chrome, but not on Firefox. Any idea what causes this?

Chrome

enter image description here

Firefox

enter image description here

CSS

.agent-photo{
  width: 70px;
  height: 70px;
  border-radius: 50px;
  object-fit: cover;
  position: relative;
}

.agent-photo:before {
  background-image: url('../img/default-user-2.jpg');
  background-size: 70px 70px;
  content: '';
  display: block;
  width: 70px;
  height: 70px;
  border-radius: 50px;
  margin-bottom:3px;
}

.agent-thumbnail-container{
  position: absolute;
  top: 50%;
}

.confirmation-container{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
}

HTML

<div class="agent-thumbnail-container">
    <img class="agent-photo" src="http://127.0.0.1:8000${agent.profile_pic}" alt="">
    <img class="agent-check" src="img/checkmark-green-circle.svg" alt="">
</div>
Maxim Vallee
  • 309
  • 3
  • 9

1 Answers1

1

Most browsers don't support pseudo-elements on img tags.

From the spec:

Note. This specification does not fully define the interaction of :before and :after with replaced elements (such as IMG in HTML). This will be defined in more detail in a future specification.

See this answer for an explanation as to why.

j-petty
  • 624
  • 5
  • 15
  • we should flag question as duplicate instead of repeating the same answer. If you cannot flag, add it as comment – Temani Afif Feb 16 '20 at 23:52
  • Thanks, I appreciate the explanation. I ended up using the built-in onerror function to render the fallback picture. – Maxim Vallee Feb 17 '20 at 06:05