I am trying to overlay one image on top of another background image, but I am facing an issue. When I change the screen resolution, the position of the image that should be placed over the background image also changes. Below is the code I am using:
<div id="identification ">
<div class="identification-image-1">
<a href="form.html">
<img id="image-1" src="images/identification-1.png" alt="" />
</a>
</div>
<div>
<a href="form.html">
<img src="images/identification-new.png" alt="" width="100%" />
</a>
</div>
</div>
CSS code:
#identification {
margin-top: 20px;
position: relative;
}
.identification-image-1 {
position: absolute;
margin-top: 200px;
margin-left: 350px;
}
Please note that 'images/identification-new.png' is set as the background image with a width of 100%. The above code helps me solve my problem, but the absolute positioning does not work correctly when changing the screen resolution.