background-position not centering w/ clip-path not working

I am having trouble centering a background image. At first I thought there were underlying CSS rules causing it not to work so I created a demo with minimal markup and CSS.

From all examples on SO & elsewhere it seems like I'm doing everything right. Could someone please help to see what I'm missing? I mentioned clip-path: in the title of the question, but playing with these properties doesn't seem to make a difference. Thanks in advance.

Codepen Demo: https://codepen.io/dickkirkland/pen/rNGbqMr

Markup:

<!-- a demo of positioning dynamic images stored in a database that can vary in size for
     an avatar-like presentation in applications -->

<div class="container">
  <div class="member-avatar">
    <img src="https://memdata-dev.herokuapp.com/images/display_image/H0266" />
  </div>
</div>

CSS/SCSS:

.container {
  display: flex;
  justify-content: center;
  background-color:#ccc;
  padding:33px;
}
// clip the background to create a round shape
.member-avatar {
  -webkit-clip-path: circle(50% at 50% 50%);
  clip-path: circle(50% at 50% 50%);
  width: 176px;
  height: 176px;
  background-position: center center;
}
// scale up images that are small in the database
.member-avatar img {
  transform: scale(1.5);
}

Solution 1:

There is no background image for the background position to affect.

There is an img element but that is not a background in the CSS sense.

You need to position the image so it is at the top but centered on the circle.

This snippet does this with a background and uses size cover which ensures you get things as required (whatever the size of the original image, without needing further scaling, as long as the subject is well placed similarly to the face in this one.

.container {
  display: flex;
  justify-content: center;
  background-color: #ccc;
  padding: 33px;
}

.member-avatar {
  -webkit-clip-path: circle(50% at 50% 50%);
  clip-path: circle(50% at 50% 50%);
  width: 176px;
  height: 176px;
  background-position: center top;
  background-image: url(https://memdata-dev.herokuapp.com/images/display_image/H0266);
  background-size: cover;
}

<div class="container">
  <div class="member-avatar">
  </div>
</div>