Let's set the scene.
I'm working with 2 images, a background image for a div and another regular image inside that same div. My question is, how can I ensure that both images are always in the exact position of each other, even when viewed on different window sizes or devices? Check out this illustration to see what I mean.
https://i.sstatic.net/AOFBT.png
Any assistance would be greatly appreciated. I must admit, my HTML and CSS skills aren't top-notch. Here's the code snippet:
.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>