尽管窗口/设备尺寸如何保持图像位置？

Question

以下是该方案。

我有2张图片，一张background-image表示div，另一张图片位于div内。我的问题是，即使在不同的窗口大小/设备上，如何让每张图像都在彼此的确切位置？这是描绘我想要的图像。

任何帮助都将得到真正的赞赏。我的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;
}