儘管窗口/設備大小，如何保持圖像位置？

Question

這裏是場景。

---

我有2幅圖像，爲div一個background-image和一個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; 
}