I have two images, one is used as a background (A) and the other (B) is positioned over a portion of the background. The issue I am facing is that when the resolution changes, the image B moves and is no longer in the desired position. https://i.sstatic.net/PiLcl.png
To achieve this, I have the following HTML code:
<!DOCTYPE html>
<html>
<!-- Our Custom CSS -->
<link rel="stylesheet" href="main.css">
<body>
<div class="parent">
<!-- Background image source -->
<img class="imageBack" src="./back.png" />
<!-- Overlaid image -->
<img class="imageOver" src="./over.png" />
</div>
</body>
</html>
And the accompanying CSS:
.parent {
position: relative;
-webkit-box-align:center;
-webkit-box-pack:center;
display:-webkit-box;
}
.imageBack {
position: relative;
top: 0;
left: 0;
}
.imageOver {
position: absolute;
top: 2%;
left:17%;
}
Can someone help me understand what I'm doing wrong and why the image is shifting when the resolution changes?