JSFiddle - React, Tailwind, and code Playground

HTML

<div>
  <i></i>
</div>

CSS

* {
  box-sizing: border-box
}

html,
body {
  height: 100%;
  padding: 0;
  margin: 0;
}

div {
  position: relative;
  background: url(https://habrastorage.org/webt/5c/c9/4f/5cc94f3d5a4f7491081350.png) no-repeat center / cover;
}

div::after {
  content: '';
  display: block;
  padding-top: 53.617%;
  /*установите ваши пропорции картинки*/
}

i {
  position: absolute;
  left: 27.2%;
  top: 47.5%;
  transform: translate(-50%, -50%);
  display: block;
  width: 4%;
  border-radius: 50%;
  background: violet;
}

i::after {
  content: '';
  display: block;
  padding-top: 100%;
  /*квадрат*/
}