背景图像上的定位元素

Question

我有一个装满视口的容器（主容器），上面有背景图像（background-size：cover）。

我需要在猫的右眼（pov）上放置另一个元素（文章）。

问题：由于背景尺寸的原因，如果调整浏览器的尺寸并且文章的位置必须灵活，则图像的尺寸会有所不同。

有什么好方法吗？

 body, html {
    	width: 100%;
    	height: 100%;
    }

main {
    	position: fixed;
    	top: 0;
    	left: 0;
    	width: 100%;
    	height: 100%;
    	background: url(https://static1.squarespace.com/static/562933c2e4b09e3e7576aa26/t/57a8cf2b440243645807818b/1470680877891/katze-begruessen.jpg?format=2500w) no-repeat;
    	background-position: top center;
    	background-size: cover;
    	overflow: scroll;
      }
article {
      position: fixed;
      top: 50%;
      left: 50%;
      height: 50px;
      width: 50px;
      background: yellow;
      }
      
      

<main>
  <article></article>
</main>