13 August 2024

A CSS-only Avatar Fallback with Cross-Browser Compatability

by Katie Pohlman

A previous post I made described how to build a CSS-only fallback for avatar image. Since that original post, I’ve learned that not all browsers treat broken image links the same. Thus, my original solution is not fully cross-browser compatible. So here I am, sharing my new solution for a CSS-only avatar fallback!

This solution utilizes the HTML <object> element, and it fairly straight-forward. <object> elements will display the data source, if available, and then will fallback to whatever is inside the <object> tags when it isn’t, in our case, the user’s initials.

First you’ll need the <object> element with the appropriate attributes and the user’s initials placed inside it.

<object 
  type="image/gif" 
  class="avatar" 
  data="https://thispersondoesnotexist.com/1"
  aria-label="Sandy Sanderson Profile Photo">
    <div class="avatar__initials">SS</div>
</object>

Next, you need the stylesheets to make your object look more like an avatar, or user profile picture.

.avatar {
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 4rem;
  width: 4rem;
  overflow: hidden;
  position: relative;
  vertical-align: middle;
}

.avatar__initials {
  background-color: purple;
  border-radius: 50%;
  color: white;
  display: flex;
    align-items: center;
    justify-content: center;
  font-family: monospace;
  font-size: 1rem;
  font-weight: bold;
  height: 100%;
  letter-spacing: 1px;
  position: absolute;
    left: 0;
    top: 0;
  width: 100%;
}