如何在 window/device 大小的情况下保持图像位置？

Question

场景如下。

我有 2 张图片，一张 background-image 用于 div，一张普通图片位于 div。我的问题是，即使在不同的 window size/device 上，我如何让每个图像都处于彼此的确切位置？这是一张描述我想要的图像。

我们将不胜感激任何帮助。我的 HTML 和 CSS 技能不是最好的。这是我的代码：

.located {
  background: url(images/located.jpg);
  background-repeat: no-repeat;
  background-position: 50% 25%;
  width: 100%;
  height: 80%;
  z-index: -1;
  position: fixed;
}
.userimage {
  margin-left: 46%;
  top: 20%;
  position: absolute;
}

html

<div class="located"></div>

<div class="userimage">
    <?php echo $userSkin3D;?>
</div>

Answer 1

HTML:

<div class="located">
  <div class="userimage">
      <?php echo $userSkin3D;?>
  </div>
</div>

CSS:

.located {
  background: url(images/located.jpg);
  background-repeat: no-repeat;
  background-position: 50% 25%;
  width: 100%;
  height: 80%;
  z-index: -1;
  position: fixed;
}

.userimage {
    top: 20%;
    left: 50%;
    position: inherit;
}

如何在 window/device 大小的情况下保持图像位置？

How to keep image position despite window/device size?

html

css

centering